【css】等間隔で左寄せしたい時は、擬似要素で残りを埋める！

wordpressの制作案件の時に多いのでメモ！！

justify-content: space-between; を使う際に
もし左寄せにしたい場合は擬似要素を使って残りの要素分を埋めてあげましょう！

ちょうどこちらのcodepenの三番目のレイアウトになります。
3カラムの場合、余白をマージンで設定して、 justify-content: left にしても
なかなか均等に配置することが容易ではありません。

cssとしては下記のような形になります。
横幅はアイテムの幅に合わせていきます。

.wrapper:after{
  content: "";
  width: 33%;
}

See the Pen 中央寄せのレイアウトのまま、左に詰める by たまき こう (@ulqvhvox) on CodePen.

おしまい