制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

CSS3のプロパティについて解説する連載です。今回はbox-orientについて解説します。フレキシブルボックス内の子要素の配置方向を指定することができます。

box-orientの指定方法

box-orientを指定する方法です。

box-orient: 子要素を配置する方向;

子要素を配置する方向を指定すれば、box-orientの指定は完了です。指定できる値は、下記の通り。

• horizontal
• vertical
• inline-axis（初期値）
• block-axis
• inherit

「horizontal」はボックス内の子要素を左から右に、「vertical」は上から下に配置します。初期値の「inline-axis」は、子要素をインライン軸に沿って、「block-axis」はブロック軸に沿って配置します。

box-orientの具体例

box-orientの具体例について見ていきましょう。

horizontal

-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
box-orient:horizontal;

vertical

-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
box-orient:vertical;

inline-axis

-moz-box-orient:inline-axis;
-webkit-box-orient:inline-axis;
-o-box-orient:inline-axis;
-ms-box-orient:inline-axis;
box-orient:inline-axis;

block-axis

-moz-box-orient:block-axis;
-webkit-box-orient:block-axis;
-o-box-orient:block-axis;
-ms-box-orient:block-axis;
box-orient:block-axis;

あとがき

CSS3のbox-orientの使い方について解説しました。box-orientは要素を配置する方向を指定するものでしたが、フレキシブルボックスには他にも子要素の揃え方やグループなどのプロパティも備わっています。レイアウトデザインの幅が広がるので、ぜひマスターしていただければと思います。