Flexboxを使いこなそう！の第4弾です。
[過去の記事]
- [第1回] Flexboxを使いこなそう！-基本の書き方-
- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する-
- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する-
今回は水平方向の配置指定についてです。
通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。
目次
水平方向の配置指定
[HTML]|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="c01" class="wrap"> <h1>水平方向の配置指定</h1> <p>flex-start（初期値）</p> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <!--//box--> </div> <!--//.wrap--> |
[CSS]
|
1 2 3 4 5 6 |
.box{ display: flex; background: #E4E4E4; padding: 10px 10px 0 10px; width: 500px; } |
こちらが基準になるHTMLになります。ここから水平方向の配置指定をしていきましょう。
flex-start – 左に配置
|
1 2 3 |
.box{ justify-content: flex-start; } |
flex-startは初期値になります。通常通り左寄せで表示がされます。
DEMO
flex-end – 右に配置
|
1 2 3 |
.box{ justify-content: flex-end; } |
flex-endは右寄せのような形になります。
DEMO
center – 中央に配置
|
1 2 3 |
.box{ jjustify-content: center; } |
centerで中央寄せになります。
DEMO
space-between – 最初と最後以外を均等配置
|
1 2 3 |
.box{ justify-content: space-between; } |
space-betweenで最初と最後以外の要素を均等配置してくれます。
通常でしたら:last-childなどで設定の必要がありそうなものが1行の記述で済むのはありがたいです。
DEMO
space-around – 全ての要素を均等配置
|
1 2 3 |
.box{ justify-content: space-around ; } |
space-aroundはspace-betweenとは異なり、すべての要素を均等配置してくれます。
DEMO
[追記]
新しい記事を書きました。
