フレキシブルボックス内の要素の整列方向を指定するには？
要素書式
- flex-flow:【 整列方向の向き 】【 複数行指定 】;
対応ブラウザ
値一覧
| 値 | 内容 |
| 整列方向の向き | フレキシブルボックスの整列方向の向きを指定します。
指定できる値は次の通りです。
「row」：整列方向を水平方向に指定します。整列方向の始端と終端は文字表記方向の「start」と「end」と同じになります。
「row-reverse」：「row」と逆の方向に指定します。
「column」：整列方向を垂直方向に指定します。整列方向の始端と終端は文字表記方向の「before」と「after」と同じになります。
「column-reverse」：「column」と逆の方向に指定します。
なお、整列方向の向きの初期値は「row」となります。 |
| 複数行指定 | フレキシブルボックスの直交方向の向きを指定します。
指定できる値は次の通りです。
「wrap」：フレキシブルボックスを複数行に指定します。
始端は文字表記方向の「start」（または「before」）と同じになります。
直交方向の終端は始端の反対側になります。
「wrap-reverse」：「wrap」と逆の方向に指定します。
このキーワードが省略された場合、単一行のフレキシブルボックスとみなされます。 |
解説文
フレキシブルボックスはボックスのレイアウト設定をより簡単に指定できる、柔軟なボックスのことです。
flex-flowプロパティは、フレキシブルボックス内の要素をどのように配置するかを指定することができます。
Chrome16.0では「row」、「row-reverse」、「column」に対応していますが、そのほかのキーワードには対応していません。
※整列方向・直交方向については、「フレキシブルボックス内の要素の揃え方を指定するには？」の図を参照してください。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
#container{
display:-moz-flexbox;
display:-webkit-flexbox;
display:-o-flexbox;
display:-ms-flexbox;
display: flexbox;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-o-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 300px;
height: 500px;
padding: 10px;
background-color: #cccccc;
}
#g{
width: -moz-flex(1 0 100px);
width: -webkit-flex(1 0 100px);
width: -o-flex(1 0 100px);
width: -ms-flex(1 0 100px);
width: flex(1 0 100px);
height: 100px;
background-color:green;
}
#y{
width: -moz-flex(1 0 100px);
width: -webkit-flex(1 0 100px);
width: -o-flex(1 0 100px);
width: -ms-flex(1 0 100px);
width: flex(1 0 100px);
height: 100px;
background-color:yellow;
}
#r{
width: -moz-flex(1 0 100px);
width: -webkit-flex(1 0 100px);
width: -o-flex(1 0 100px);
width: -ms-flex(1 0 100px);
width: flex(1 0 200px);
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="g">サンプル緑</div>
<div id="y">サンプル黄</div>
<div id="r">サンプル赤</div>
</div>
</body>
</html>
関連項目
