HTML&CSS【Flexboxについて】
HTML&CSS【Flexboxについて】
Flexboxとは？
CSS3から追加されたレイアウトモジュール。
float等で指定していた要素の様々な並びをより少ないコードで実現することが可能になる。
めちゃくちゃ便利なのでめちゃくちゃに活用していくべきだと感じた！！！！！
Flexboxを使用するために必要なもの
親要素と子要素！
<ul class="parent">
<li class="children01">子要素</li>
<li class="children02">子要素</li>
<li class="children03">子要素</li>
<li class="children04">子要素</li>
</ul>
子要素を横並びにする
親要素にdisplay:flexを指定します
.parent{
display:flex;
}
指定した要素を親要素に合わせて伸縮させる
子要素にflex:autoを指定します
.parent li{
flex:auto;
}
子要素の幅に合わせて折り返す
親要素にflex-wrap:wrap 子要素にwidthを指定します
.parent{
display:flex;
flex-wrap:wrap;
}
.parent li{
flex:auto;
width:50%;
}
子要素を上から下に並べる
レスポンシブデザインでスマホ対応するとき等に有効 親要素にflex-direction: columnを指定する
.parent{
display:flex;
flex-wrap:wrap;
}
.parent li{
flex:auto;
width:50%;
}
@media all and(width-max:670px){
.parent{
flex-direction: column;
margin:0 auto;
}
}
