justify-contentで最後の行を左寄せにする

flexアイテムが3カラムの場合に、afterなど擬似要素を利用して空白のflexアイテムを生成することで、どんな数でも左寄せに表示することができます。

  • item1
  • item2
  • item3
  • item4
  • item5
.box{
  border:3px solid #21a8cd;
  padding:10px;
  display : flex;
  flex-wrap : wrap;
  justify-content:space-between;
}
.box::after{
  content:"";
  display: block;
  width:30%;
}
.box li{
  border:3px solid #ae21cd;
  padding:10px;
  margin-bottom:10px;
  box-sizing:border-box;
  width:30%;

}

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です