目的
Flexboxで5カラムの要素を並べたい時、最後の要素が５に満たない時、レイアウトが崩れてしまう。
これを
こうしたい
書き方
html
<ul class="flex">
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
<li class="flex__item">Sample</li>
// 空のボックスを用意する
<li class="flex__item--empty"></li>
<li class="flex__item--empty"></li>
<li class="flex__item--empty"></li>
<li class="flex__item--empty"></li>
</ul>
scss
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&__item {
width: 18%; /* 横幅を指定する */
&--empty {
width: 18%; /* 空の要素にも同じ横幅を指定する */
}
}
}
参考サイト
Flexbox で全体を中央に配置しつつ最後の行を左揃えにする
Flexboxのjustify-contentで最後の行を左寄せにする方法
↧