Zenn
Open1

CSS TIPS

CSS
Tips
frontend
#
memo
uto-usuiuto-usui

Flex Item の折り返し

justify-content: space-between の最後のアイテムをグリッドにそわせるように

.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -1.55rem;
  margin-left: -1.55rem;

  &::after {
    flex: auto;
    content: '';
  }
}

.item {
  width: calc(100% / 3);
  padding-right: 1.55rem;
  padding-left: 1.55rem;
}