【CSS】Flexbox 最後の行を左寄せにする（space-between使用時）

4カラムの場合。
before擬似要素、after擬似要素で空白のボックスを作る。

サンプル

コードを見る（HTML・CSS）

HTML

<div class="boxArea">
  <div class="one">01</div>
  <div class="one">02</div>
  <div class="one">03</div>
  <div class="one">04</div>
  <div class="one">05</div>
  <div class="one">06</div>
  <div class="one">07</div>
  <div class="one">08</div>
  <div class="one">09</div>
  <div class="one">10</div>
</div>

CSS

/* ---------- 01 OK：疑似要素で左寄せ ---------- */
.boxArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.boxArea::before {
  content: "";
  display: block;
  width: 24%;
  order: 1;
}
.boxArea::after {
  content: "";
  display: block;
  width: 24%;
}
.boxArea .one {
  border: 3px solid #2b2a27;
  background-color: #e8dc6a;
  color: #2b2a27;
  text-align: center;
  padding: 15px;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 24%;
}
見本ページをひらく（OK：疑似要素で左寄せ）

サンプル NG

before擬似要素、after擬似要素がないとこうなる。

コードを見る（HTML・CSS）

HTML

<div class="boxArea_ng">
  <div class="one">01</div>
  <div class="one">02</div>
  <div class="one">03</div>
  <div class="one">04</div>
  <div class="one">05</div>
  <div class="one">06</div>
  <div class="one">07</div>
  <div class="one">08</div>
  <div class="one">09</div>
  <div class="one">10</div>
</div>

CSS

/* ---------- 02 NG：疑似要素なし ---------- */
/* NG：疑似要素がないと、最後の行が両はしに広がる */
.boxArea_ng {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.boxArea_ng .one {
  border: 3px solid #2b2a27;
  background-color: #e8dc6a;
  color: #2b2a27;
  text-align: center;
  padding: 15px;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 24%;
}
見本ページをひらく（NG：疑似要素なし）

必要なもの

4カラムの場合。

.boxArea::before {
  content: "";
  display: block;
  width: 24%;
  order: 1;
}
.boxArea::after {
  content: "";
  display: block;
  width: 24%;
}

関連記事

【CSS】Flexboxの使い方と実装サンプル集
【CSS】Flexbox 最後の行を左寄せにする（space-between使用時）
デザインのメモ 2018.9.26

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。