【擬似要素】Flexboxで等間隔に配置し最後だけ左寄せする方法【space-between】

flexboxのspace-betweenを使ってるんだけど、最後の行だけ左寄せになってしまう、、！

「justyfy-content:space-between;」を使うとめちゃくちゃ簡単に要素を均等に置くことができますよね。

でもそれだと

こんな風に最後の行が両端に行ってしまいます。

ぶた可愛い。。

「。。。違う！私は均等に左から配置したいんだ！」

均等に左から配置するために今まで何回ググったことか。。笑

てことで同じように困っているあなたの助けになることを願ってまとめましたm(_ _)m

本記事の内容

目標物
コード例
HTMLに書くもの
CSSに書くもの

目標物

冒頭でも書きましたが、flexboxを使って均等に左寄せしていきたいと思います。

目標物はこんな感じです◎

コード例

CSSに５行追加するだけで解決できます！簡単です！

See the Pen
PoYMeor by Maaaa (@Mayubou)
on CodePen.

HTMLに書くもの

親要素と子要素をしっかり分けてください。

<div class="flexbox">
  <div class="flex-child">aaa</div>
  <div class="flex-child">bbb</div>
  <div class="flex-child">ccc</div>
  <div class="flex-child">ddd</div>
  <div class="flex-child">eee</div>
</div>

CSSに書くもの

大事なのがコメントアウトしてる部分。↓↓

.flexbox{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* afterを追加するだけ！！ */
.flexbox::after{
  content:"";
  display: block;
  width:33%;
}

.flex-child{
  width:33%;
  border:1px solid #E5E0DF;
  padding:20px;
  margin-bottom:20px;
  box-sizing:border-box;
}

after擬似要素を追加してあげます！

イメージとしてはこんな感じ。HTMLには書かれてないけどCSSで書いてあげたよってことです。