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

Web制作

2016年07月27日

CSS3プロパティの連載記事

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

horizontal

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

vertical

vertical

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

inline-axis

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

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

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。