新しい CSS display:box プロパティの詳細な説明

1. ディスプレイボックス;

要素にこのプロパティを設定すると、display:inline-block; と同様に、その子要素が同じレベルに配置されます。

2. 子要素には以下のプロパティを設定できます

前提条件: 次のプロパティを使用するには、親で display:box を設定する必要があります。

1.ボックスフレックス:数値;

1) 親要素の幅の数

2) 子要素に固定幅が設定されている場合、その子要素は固定幅を使用し、固定幅が設定されていない他の子要素は残りの親の幅（親 - 固定幅を持つ子要素の合計幅）を使用します。

3) 子要素にマージン値がある場合、残りの幅（親の幅 - 子の固定合計幅 - 合計マージン値）は数値部分になります。

2.ボックスの向き:水平/垂直

親にこのプロパティを設定すると、子要素は水平または垂直に配置されます。

注: すべての主要ブラウザがこのプロパティをサポートしているわけではないため、プレフィックスを追加する必要があります。

1) 水平配置の場合、子要素の合計幅 = 親要素の幅。親の幅が固定されている場合、子に設定された幅は無効になり、子は親の幅を埋めます。

2) 垂直配置の場合、子要素の合計高さ = 親要素の高さ。親の高さが固定されている場合、子に設定された高さは無効になり、子は親の高さを埋めます。

3.ボックス方向:通常/逆

子要素の並べ替え順序を決定するには、親要素にこのプロパティを設定します。

1) 通常のデフォルト値、子はHTML順に並べられる

2) 逆

4.ボックス配置:開始/終了/中央/ストレッチ

親レベルでの子の垂直配置を設定します。

1) 垂直上揃えを開始する

2) 垂直下揃えを終了する

3) 中央垂直配置

4) ストレッチは、親によって設定された高さに合わせて子の高さを伸ばします。子の高さが無効です。

5.ボックスパック:開始/終了/中心

親レベルでの子の水平方向の配置を設定します。

1) 水平左揃えを開始

2) 水平右揃え終了

3) 中央揃え

要約する

上記は私が紹介した新しい CSS display:box 属性です。お役に立てれば幸いです。ご質問があれば、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。