More than 5 years have passed since last update.

HTML & CSS (Flexbox編)

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

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

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

ul {
 display:flex;
}

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

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

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

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

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