/* ===================================================
   Flexbox 最後の行を左寄せにする
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 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%;
}

/* ---------- 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%;
}