flexを使った最後の要素を左に寄せたい

Question

 <section class="osusume">
    <h2>オススメコンテンツ</h2>
    <div class="container">
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
      <div class="content">
        <img src="img/bnr-hot-yoga.png">
        <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
      </div>
    </div>
</section>

.osusume .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.osusume .container .content {
  flex: 0 0 calc(100% / 2 - 20px)
}

.osusume .container .content:nth-child(odd) {
  margin-right: 20px
}

.osusume .container .content img {
  width: 100%
}

最後の要素が真ん中にきてしまうため、左端に寄せたいのですが、marginを使って無理やり寄せる以外の方法がありましたら教えてください、

Answer 1

justify-content: start; で解決済みのようですが、余白が左右に10pxずつあるはずなので、全体的に左に寄った感じになるのが気になりました。

justify-content: space-between;

space-between とするとバランスよくなりますが、左右にあるはずの余白が中央に来ることになります。

1行に2個ずつなので、次のようにすることもできます。

.osusume .container::after {
  content: '';
  flex: 0 0 calc(100% / 2 - 20px);
}

3個以上の場合も ::before を使って何とかできたりしますが、グリッドレイアウトにするのが簡単です。

.osusume .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
  padding: 0 10px;
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

Comments

[Lhankor_Mhy]

「余白が左右に10pxずつ」というのはもしかして、
.osusume .container .content:nth-child(odd) {
margin-right: 20px
}
のことですか？

[x_x]

flex: 0 0 calc(100% / 2 - 20px)
のアイテムが2個あるので、40px 分の余白があり、その margin-right で 20px 使われるため残り 20px ずつあります。

[Lhankor_Mhy]

おお、ほんとですね、うっかりしてました。
では、space-around が一番近いですか。

[Lhankor_Mhy]

というか、普通に margin:0 10px; でいいのかな？

[x_x]

space-around ではやはり最後のアイテムが中央に来てしまうので解決できません。

[x_x]

計算して調整するのもありです。
対応ブラウザに IE が含まれていればそうします。

Answer 2

「flex 中央 最後 左」でググると解法が出てきました。まずググって試すようにされることをおすすめします。

アイテムの数が動的に変わる可能性があるのであればJavaScriptで要素を追加するのがよいと思います。

<section class="osusume">
  <h2>オススメコンテンツ</h2>
  <div class="container">
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content">
      <img src="img/bnr-hot-yoga.png">
      <h3>HIIT ー　心拍数を上げて、安静時の減少</h3>
    </div>
    <div class="content dummy"></div> <!-- これ -->
  </div>
</section>

Answer 3

.osusume .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start; /* ここを変更 */
}