目次
Flexbox
できること
- 並び向きを指定する：縦並び・横並び
- 折り返しを指定する：折り返しあり・なし
横並び
display: flexを使う！
指定した要素の子要素を横並びにする。
→横並びにしたい要素の親要素にdisplay:flex;を指定する
横並びにした要素を画面いっぱいに広げる
flex: autoを使う！
親要素の幅に合わせて伸縮したい要素にflex: autoを指定する。
要素を2列に繰り返す
flex-wrap: wrapを使う。
子要素のサイズに応じて折り返すことができる。
STEP
折り返したい要素の親要素にflex-wrap:wrapを指定する
例：flex-list{ display:flex; flex-wrap:wrap;}
STEP
折り返したい要素に列数に合わせてwidthを指定する
例：2列の場合は50%に指定する
.flex-list li{ flex:auto; width:50%;}
縦並び
flex-direction: column：子要素を上から下へ並べる
→縦並びにしたい要素の親要素にdisplay:column;を指定する
コメント