More than 3 years have passed since last update.

HTML & CSS (Flexbox編)

Last updated at 2019-10-02Posted at 2019-10-01

Flexboxとは

・縦、横並びができる。
・折り返しを付けられる。

　指定した要素の子要素を横並びにする。
　↓
　親要素(ul)にdisplay:flexをかける。
　子要素(li)が横並びになる

ul {
 display:flex;
}

　要素の幅を親要素に合わせて伸縮させることができる。
　↓
　子要素(li)にflex:autoをかける。

ul {
 display:flex;
}
li {
 flex:auto;
}

　子要素のサイズ(width)に応じて折り返す。
　↓
　親要素にflex-wrap:wrap
　子要素にwidthを設定する。(%で)

例えば、2列にしたいときは、子要素にwidth:50%;を付ける。

　子要素を上から下へ並べる。
　↓
　親要素にflex-direction:columnを付ける。
　子要素にmargin:0 auto、widthを設定すると中央寄せできる。