Flexboxを使いこなそう！の第2弾です。
[前回]
並びの指定については『flex-direction』プロパティを使っていきます。
これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。
子要素の並び順を指定しよう-横並び-
左から右に並べる
とりあえず通常通りの左から右に並べる方法です。
初期値なので、指定の必要も特には無いのですが一応。
HTML
|
1 2 3 4 5 6 7 8 |
<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--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box{ display: flex; flex-direction: row; } .box .item{ padding: 15px; background: #43A1AC; color: #FFF; margin-right: 10px; margin-bottom: 10px; font-size: 20px; font-weight: bold; } |
DEMO
並びの指定については冒頭で述べた通り『flex-direction』プロパティに対して指定をします。
今回は『row』を指定して想像通り『1,2,3,4…』と並んでくれました。
ちなみに今回も親要素に指定をしてあげますので、ここだけ注意してください。
右から左に並べる
次に右から左に並べてみます。
HTMLは前項のままで、cssを少し書き換えてあげるだけで実現できます。
CSS
|
1 2 3 4 |
.box{ display: flex; flex-direction: row-reverse; } |
DEMO
flex-directionに『row-reverse;』を指定してあげるだけで要素を右から左に並べることができました。
ただ、今回の場合だとDEMOのように右に寄ってしまいます。
対応方法もありますが、そちらは追々…。
子要素の並び順を指定しよう-縦並び-
上から下に並べる
正直ぱっと見Flexboxを使っているのかわからない感じになります。
HTML
|
1 2 3 4 5 6 7 8 |
<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--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box{ display: flex; flex-direction: column; } .box .item{ padding: 15px; background: #43A1AC; color: #FFF; margin-right: 10px; margin-bottom: 10px; font-size: 20px; font-weight: bold; } |
DEMO
今回は『column』を指定してあげました。
これで横ではなく縦に並んでくれます。
下から上に並べる
前項と同じHTMLを用意しても、下を1として並んでくれます。
CSS
|
1 2 3 4 |
.box{ display: flex; flex-direction: column-reverse; } |
DEMO
今回は『column-reverse』を指定しました。
要素が逆に並んでくれるのって不思議な感じになりますね。
[追記]
新しい記事を書きました。
