HTMLとCSSのメモ（コピペ用）
HOMEに戻る

Flexboxのjustify-content:space-betweenで3列または4列表示時、コンテンツが足りない場合に左詰めにする方法

CSS

3列表示時

CSS
.flex-col3{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-col3::after{
  content: "";
  display: block;
  width: 30%; /* 子要素の幅と同じに */
}
.flex-col3 li{
  width: 30%;
}

4列表示時

CSS
.flex-col4{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-col4::after{
  content: "";
  display: block;
  width: 24%; /* 子要素の幅と同じに */
}
.flex-col4::before{
  content: "";
  display: block;
  width: 24%; /* 子要素の幅と同じに */
  order: 1; /* 並び順 */
}
.flex-col4 li{
  width: 24%;
}