フレキシブルボックス内の行の寄せ方を指定するには？
要素書式
- flex-line-pack:【start | end | center | justify】;
対応ブラウザ
値一覧
| 値 | 内容 |
| start | 各行はフレキシブルボックスの直交方向の始端に寄せて表示されます。 |
| end | 各行はフレキシブルボックスの直交方向の終端に寄せて表示されます。 |
| center | 各行はフレキシブルボックスの直交方向の中央に寄せて表示されます。 |
| justify | 各行はフレキシブルボックスの直交方向で均等に配置されます。
余白がない場合や、フレキシブルボックス内に一行分しかない場合は、「start」と同じ表示になります。
複数の行が存在する場合は、最初の行がフレキシブルボックスの直交方向の始端に、最後の行が直交方向の終端に表示され、残りの行は均等に配置されます。 |
解説文
フレキシブルボックスはボックスのレイアウト設定をより簡単に指定できる、柔軟なボックスのことです。
複数行のフレキシブルボックスでは、その直交方向に余白が生じる場合があります。
flex-line-packプロパティは、フレキシブルボックス内の各行をどのように配置するかを指定できます。
現在の主要ブラウザはまだこのプロパティに対応していません。
※整列方向・直交方向については、「フレキシブルボックス内の要素の揃え方を指定するには？」の図を参照してください。
サンプルソース
<!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-flex-flow:row wrap;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-moz-flex-line-pack:center;
-webkit-flex-line-pack:center;
-o-flex-flex-line-pack:center;
-ms-flex-line-pack:center;
flex-line-pack:center;
width:300px;
height: 500px;
padding: 10px;
background-color: #cccccc;
}
#y{
background-color:yellow;
width: -moz-flex(100px 1);
width: -webkit-flex(100px 1);
width: -o-flex(100px 1);
width: -ms-flex(100px 1);
width: flex(100px 1);
height: 100px;
}
#r{
background-color:red;
width: -moz-flex(100px 1);
width: -webkit-flex(100px 1);
width: -o-flex(100px 1);
width: -ms-flex(100px 1);
width: flex(100px 1);
height: 100px;
}
#g{
background-color:green;
width: -moz-flex(300px 1);
width: -webkit-flex(300px 1);
width: -o-flex(300px 1);
width: -ms-flex(300px 1);
width: flex(300px 1);
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="y">サンプル黄</div>
<div id="r">サンプル赤</div>
<div id="g">サンプル緑</div>
</div>
</body>
</html>
関連項目
