justify-content:space-between;で要素が左寄せにならない問題の対処法

3381 ワード
HTML CSS flexbox HTML テキストリンク

はじめに

初学者でもFlexBoxを使用する人は多いはず。
justify-content:space-between(以下：jcsb)を使った時、要素が左に寄って欲しいのに真ん中に寄ってしまう問題を解決する。

例

例えば要素を五個並べて、jcsbをかけた時にこうなってしまう場合

ほんとはこうしたい

解決策

親要素に擬似要素をつける。
簡易的なコードの例

index.html
<div class="flex__parent">
  <div class="flex__child">
  <div class="flex__child">
  <div class="flex__child">
  <div class="flex__child">
  <div class="flex__child">
</div>
style.css
.flex__parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex__child {
  background-color: #ccc;
  width: 200px;
}

// 親要素に対して擬似要素を指定する
.flex__parent::after {
  content: ' ';
  display: block;
  width: 200px;
}

これで、要素が奇数の時でも左詰めの状態で表示されます。

補足

擬似要素で指定する透明の要素の幅は子要素（この場合は.flex__child）と同じ幅にしてあげてください。

終わりに

以上で説明は終わりです。
justify-content:space-betweenで要素を左詰めにしたい時にお試しください。