no-image

ボックスの並び

display/ボックスにする

ボックスレイアウト

結果

.item_01_01
.item_01_02
.item_01_03

解説

「display:box」は、floatを使わずボックスを横並びにできる機能です。
まだ、対応ブラウザが少ないため利用には注意が必要です。

box-orient/ボックスの並べ方

ボックスの並び指定

結果

.item_01_01
.item_01_02
.item_01_03

解説

「box-orient: horizontal」は、display:boxされた子要素をどう並べるかの指定です。
「horizontal」は、左から右へ並べる。
「vertical」は、上から下へ並べる。
「inline-axis」は、文字表記の方向に従って並べる。
「block-axis」は、文字表記の方向に従って上から順に並べる。

box-direction/ボックスを逆から並べる

ボックスを逆方向から並べる。

結果

.item_01_01
.item_01_02
.item_01_03

解説

「box-direction: reverse」は、display:boxされた子要素を逆方向に並べるかの指定です。
「reverse」は、右から左へ並べる。
「normal」は、左から右へ並べる。

box-ordinal-group/各ボックスの並び

並び順をボックスごとに指定。

結果

.item_01_01
.item_01_02
.item_01_03

解説

ボックスの並び順を要素ごとに指定できます。

box-align/ボックスの縦揃え

ボックスの縦位置揃え。

結果

.item_01_01
.item_01_02
.item_01_03

解説

「box-align」は、ボックスの配置を指定できます。
「start」は、上揃え。
「end」は、下揃え。
「center」は、余白は均等に分けられボックスの子要素はセンタリングされる。
「stretch」は、デフォルト。

box-pack/ボックスの横揃え

ボックスの横位置揃え。

結果

.item_01_01
.item_01_02
.item_01_03

解説

「box-pack」は、ボックスの配置を指定できます。
「start」は、デフォルト。
「end」は、右揃え。
「center」は、子要素のセンタリング。
「justify」は、基本的にstartと同じだが、余った余白は均等に分割される。

box-flex/各ボックスの比率

各ボックスに割り当てる比率。

結果

.item_01_01
.item_01_02
.item_01_03

解説

「box-flex」は、ボックスの初期幅を元に、比率で幅を割り当てます。 例題では、全ての子ボックスを100pxにしています。「0.0」=「100px」になります。 1.0は200pxというように、比率で幅をかえています。