プログラミングの勉強日記
2020年5月29日 Progate Lv.64
Flexbox
CSSを使ったレイアウト方法の1つである
display:flex;
指定した要素の子要素を横並びにする
HTML
<ulclass="list"><!--親要素--><liclass="li1">item1</li><!--横並びにしたい要素--><liclass="li2">item2</li><!--横並びにしたい要素--><liclass="li3">item3</li><!--横並びにしたい要素--><liclass="li4">item4</li><!--横並びにしたい要素--></ul><!--親要素-->.list{display:flex;}flex:auto;
指定した要素の幅を親要素に合わせて伸縮できる
HTML
<ulclass="list"><!--親要素--><liclass="li1">item1</li><!--横並びにしたい要素--><liclass="li2">item2</li><!--横並びにしたい要素--><liclass="li3">item3</li><!--横並びにしたい要素--><liclass="li4">item4</li><!--横並びにしたい要素--></ul><!--親要素-->.list{display:flex;}.listli{flex:auto;}flex-wrap:wrap;
子要素のサイズに応じて繰り返す。繰り返したい要素の親要素に指定する。折り返したい要素自身には列数に応じたwidthを指定する。
HTML
<ulclass="list"><!--親要素--><liclass="li1">item1</li><!--横並びにしたい要素--><liclass="li2">item2</li><!--横並びにしたい要素--><liclass="li3">item3</li><!--横並びにしたい要素--><liclass="li4">item4</li><!--横並びにしたい要素--></ul><!--親要素-->.list{display:flex;flex-wrap:wrap;}.listli{flex:auto;width:50%;/*2列に折り返したい場合は50%と指定する*/}flex-direction:column
子要素を上から下へ並べる。縦に並べたい要素の親要素に指定する。（下記の例では中央寄せに配置している）
HTML
<ulclass="list"><!--親要素--><liclass="li1">item1</li><!--横並びにしたい要素--><liclass="li2">item2</li><!--横並びにしたい要素--><liclass="li3">item3</li><!--横並びにしたい要素--><liclass="li4">item4</li><!--横並びにしたい要素--></ul><!--親要素-->.list{flex-direction:column;}.listli{margin:0auto;width:50%;}