2016年07月27日

box-orientでフレキシブルボックス内の配置方向を指定する（CSS3）

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

box-orientの指定方法

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

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

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

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

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

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

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

-moz-box-orient:inline-axis;
-webkit-box-orient:inline-axis;
-o-box-orient:inline-axis;
-ms-box-orient:inline-axis;
box-orient:inline-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は要素を配置する方向を指定するものでしたが、フレキシブルボックスには他にも子要素の揃え方やグループなどのプロパティも備わっています。レイアウトデザインの幅が広がるので、ぜひマスターしていただければと思います。