flexboxで3列の場合右に寄ってしまう時の対処方法【space-between】

flexboxの「space-between」はかなり便利ですが、3列で最後が2つになってしまった時、左揃えにならず崩れてしまいます。
そんな時どうすれば左揃えにできるのかご紹介します。

Flexboxで3列の要素を左揃えにする【space-between】

まず基本のソースを書いていきます。

<ul class="list">
<li>コンテンツ1</li>
<li>コンテンツ2</li>
<li>コンテンツ3</li>
<li>コンテンツ4</li>
<li>コンテンツ5</li>
</ul>
.list{
width: 1000px;
display: flex;
justify-conteent: space-between;
}
.list li{
width: 300px;
}

この場合、2列目が左揃えにならず崩れてしまいます。
そこで、親要素に擬似要素をつけて解決します。

.list::after{
content:"";
display: block;
width:300px;
}

listの最後に擬似的に要素を作ることで、2列目の2つの要素を左揃えにすることができます。

コメント