CSS3 では、新しいボックス モデルであるフレックス ボックス モデルが導入されています。これは、ボックスが他のボックスにどのように分散されるか、および利用可能なスペースがどのように処理されるかを決定します。これは XUL (Firefox で使用されるユーザー対話言語) に似ており、XAML や GladeXML などの他の言語も同じボックス モデルを使用します。
このモデルを使用すると、ブラウザ ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。この記事の例では、次の HTML コードを使用します。
<本文>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
従来のボックス モデルは、HTML フローに基づいてボックスを垂直に配置します。フレックスボックス モデルを使用すると、特定の順序を指定したり、その順序を逆にしたりできます。フレキシブル ボックス モデルを有効にするには、子ボックスを持つボックスの表示属性値を box (または inline-box) に設定するだけです。
ディスプレイ: ボックス;
水平または垂直分布
「box-orient」は、分布の座標軸 (垂直方向と水平方向) を定義します。これら 2 つの値はボックスの表示方法を定義します
体{
ディスプレイ: ボックス;
ボックス方向: 水平;
}
逆分配
「box-direction」ではボックスの表示順序を設定できます。デフォルトでは、配布軸を定義するだけで済みます。ボックスは HTML フローとともに配布されます。横軸の場合は左から右に分布し、縦軸の場合は上から下に分布します。ボックスの順序を逆にするには、「box-direction」の属性値を「reverse」として定義します。
体 {
ディスプレイ: ボックス;
ボックス方向: 垂直;
ボックス方向: 逆;
}
特定の分布
属性「box-ordinal-group」は、ボックスが配布される順序を定義します。配信順序は任意に制御できます。グループは「1」から始まる番号で定義され、ボックス モデルはこれらのグループを最初に配布し、これらすべてのボックスが各グループに含まれます。配布は小規模から大規模に配置されます。
体 {
ディスプレイ: ボックス;
ボックス方向: 垂直;
ボックス方向:逆;
}
#box1 {
ボックス順序グループ: 2;
}
#box2 {
ボックス順序グループ: 2;
}
#box3 {
ボックス順序グループ: 1;
}
