2016年07月27日
CSS3のプロパティについて解説する連載です。今回は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は要素を配置する方向を指定するものでしたが、フレキシブルボックスには他にも子要素の揃え方やグループなどのプロパティも備わっています。レイアウトデザインの幅が広がるので、ぜひマスターしていただければと思います。
今すぐ無料で見積もりを依頼する
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。