Flexboxを使いこなそう！の第5弾です。
[過去の記事]
- [第1回] Flexboxを使いこなそう！-基本の書き方-
- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する-
- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する-
- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方-
今回は垂直方向の配置指定についてです。
目次
垂直方向の配置指定
[HTML]|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="c01" class="wrap"> <h1>垂直方向の配置指定</h1> <p>stretch（初期値）</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 7 8 9 10 11 12 13 14 15 |
.box{ display: flex; background: #E4E4E4; padding: 10px 10px 0 10px; width: 500px; height: 300px; } .box .item{ padding: 15px; color: #FFF; margin:0 10px 10px 0; font-size: 20px; font-weight: bold; background: #89E4DE; } |
こちらが基準になるHTMLになります。ここから垂直方向の配置指定をしていきましょう。
垂直方向についての指定は『align-items』プロパティを使用します。
stretch – 初期値
DEMO
|
1 2 3 |
.box{ align-items: stretch; } |
stretchは初期値になります。
flexコンテナや一番高い要素に合わせて表示してくれます。
flex-start – 開始位置から表示
DEMO
|
1 2 3 |
.box{ align-items: flex-start; } |
flex-startを指定します。
flexコンテナの開始位置から表示されます。
flex-end – 下部から表示
DEMO
|
1 2 3 |
.box{ align-items: flex-end; } |
flex-endを指定します。
flexコンテナの下部から表示されます。
center – 中央揃えで表示
DEMO
|
1 2 3 |
.box{ align-items: center; } |
centerを指定します。
flexコンテナの中央に表示されます。
baseline – ベースライン揃えで表示
DEMO
|
1 2 3 |
.box{ align-items: baseline; } |
baselineを指定します。
要素内のテキストのベースラインに揃えて表示してくれます。
