HTML&CSS~Flexbox編~

プログラミングの勉強日記

2020年5月29日　Progate Lv.64

Flexbox

　CSSを使ったレイアウト方法の1つである

display:flex;

　指定した要素の子要素を横並びにする

HTML

<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
}

flex:auto;

　指定した要素の幅を親要素に合わせて伸縮できる

HTML

<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
}
.list li{
  flex:auto;
}

flex-wrap:wrap;

　子要素のサイズに応じて繰り返す。繰り返したい要素の親要素に指定する。折り返したい要素自身には列数に応じたwidthを指定する。

HTML

<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
  flex-wrap:wrap;
}
.list li{
  flex:auto;
  width:50%; /*2列に折り返したい場合は50%と指定する*/
}

flex-direction:column

　子要素を上から下へ並べる。縦に並べたい要素の親要素に指定する。（下記の例では中央寄せに配置している）

HTML

<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  flex-direction:column;
}
.list li{
  margin:0 auto;
  width:50%; 
}