フレキシブルボックスの行内の要素の寄せ方を指定するには？
要素書式
- flex-pack:【start | end | center | justify】;
旧書式
対応ブラウザ
値一覧
| 値 | 内容 |
| start | フレキシブルボックス内の要素は行の始端に寄せて表示されます。 |
| end | フレキシブルボックス内の要素は行の終端に寄せて表示されます。 |
| center | フレキシブルボックス内の要素は行の中央に寄せて表示されます。 |
| justify | フレキシブルボックス内の要素は行内で均等に配置されます。
余白がない場合や、行内に要素が１つしかない場合は、「start」と同じ表示になります。
行内に要素が複数ある場合は、最初の要素が行の整列方向の始端に表示され、最後の要素が行の整列方向の終端に表示され、残りの要素は均等に配置されます。 |
解説文
フレキシブルボックスはボックスのレイアウト設定をより簡単に指定できる、柔軟なボックスのことです。
flex-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-pack:center;
-webkit-flex-pack:center;
-o-flex-pack:center;
-ms-flex-pack:center;
flex-pack:center;
height: 500px;
padding: 10px;
background-color: #cccccc;
}
#y{
background-color:yellow;
width:100px;
}
#r{
background-color:red;
width:200px;
}
#g{
background-color:green;
width:150px;
}
</style>
</head>
<body>
<div id="container">
<div id="y">サンプル黄</div>
<div id="r">サンプル赤</div>
<div id="g">サンプル緑</div>
</div>
</body>
</html>
関連項目
