コンテナ内にコンテンツを均等に配置したい

Question

前提・実現したいこと

HTMLとSCCのコーディングで、練習用の見本サイト（XDデータ）を元にコーディングしています。
その中で「CAT２」と言うコンテンツの中に、（画像＋文章）×３のアイテムをコンテナ（幅980px）内にdisplay:flexを利用して均等に配置したいです。

発生している問題・エラーメッセージ

justify-content: space-between;を利用すると良いとあったので、使ってみましたが、コンテナ幅いっぱいに均等にならず、画像も３枚のうち２枚が重なってしまいます。

該当のソースコード

    <div class="contents-wrapper">
      <div class="container">
        <h1>CAT2</h1>
        <div class="flex-box">
        <div class="content">
          <img src="/Users/sayakashigemori/Desktop/html_cat/img/cat2-1.png" alt="cat2-1">
          <p>そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。</p>
        </div>
        <div class="content">
          <img src="/Users/sayakashigemori/Desktop/html_cat/img/cat2-2.png" alt="cat2-1">
          <p>是が人間の飲む烟草といふものである事 は漸く此頃知つた。</p>
        </div>
        <div class="content">
          <img src="/Users/sayakashigemori/Desktop/html_cat/img/cat2-3.png" alt="cat2-1">
          <p>此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。</p>
        </div>
        </div>
      </div>
    </div>
    <div class="eyecatch-wrapper">
      <div class="container">
        <img src="/Users/sayakashigemori/Desktop/html_cat/img/bg.jpg" alt="bg">
        <p>そうして其穴の中から時々ぷうぷうと烟を吹く。<br>どうも咽せぽくて實に弱つた。<br>是が人間の飲む烟草といふものである事は漸く此頃知つた。</p>
        <p>此書生の掌の裏でしばらくはよい心持に坐つて居つたが、<br>暫くすると非常な速力で運轉し始めた。<br>書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。　</p>
      </div>
    </div>

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

.content img {
  width: 300px;
}

.content {
  margin: 0;
}

試したこと

marginを０にする。
前後に:afterなど擬似要素がないかチェックする。

補足情報（FW/ツールのバージョンなど）

いろいろググってみたのですが、どうしても行き詰まってしまいました。flexではなくfloatなどの他の方法が良いのでしょうか？
コーディングの勉強を始めたばかりの初心者なのでコードも無茶苦茶ですが、ご指導いただけると助かります。どうぞ宜しくお願いいたします。

Comments

[mari.rinn]

質問文内に記載されているcssが少ないので細かい情報がわからないのですが、contentというクラスのcssにwidthを入れてみるとどうなりますか？

[yamahaggy]

ご回答ありがとうございます!
contentに画像幅（300px）を入れたところうまく行きました。ありがとうございます！
これは、flexコンテナ内のコンテンツ幅がはっきりとしなかった為、均等に配置ができなかったという考え方で合っていますでしょうか？

[mari.rinn]

うまくいって良かったです。その解釈で良いかと思います。

[yamahaggy]

大変助かりました。ありがとうございました！

Answer 1

均等に配置する場合は、以下のような記述を追加すればOKと思います。

.content {
  margin: 0;
  flex: 1 1 0%; /* こちらを追加 */
}

余白をつけるとしたら、例えば以下のパターンがあると思います。

パターン1: 余白を50pxで固定

.flex-box {
  display: flex;
  /* justify-content: space-between; */
}
.content {
  margin: 0;
  flex: 1 1 0%; /* こちらを追加 */
}
.content:not(:last-child) {
  margin-right: 50px; /* 一番右側のdiv以外、右側に余白を指定 */
}

パターン2: 要素の幅を300pxで固定

.flex-box {
  display: flex;
  justify-content: space-between;
}
.content {
  margin: 0;
  flex: 0 1 300px; /* こちらを追加 */
}

Comments

[yamahaggy]

ご回答ありがとうございます！
どの方法もしっかり効きました。一つの方法のみならず、複数の解決法をお教えいただきありがとうございました。

お恥ずかしながら、flex:-grow -shrink -basisを初めて知りました。
質問を重ねるようで申し訳ないのですが、修正依頼でいただいた「contentにimgと同じwidthを指定」という方法では、flexアイテムの幅がはっきりとしなかった為、均等に配置ができなかったのだなと理解できたのですが、flex: 1 1 0%;はなぜこの一行で解決ができるのでしょうか？

justify-content: space-between; には幅情報が要るが、flex: 1 1 0%;はcontentの幅に関係なく均等に配置ができる、ということでしょうか。
自分でもググってみましたが、flex:-grow -shrink -basisは難しく（特に-growの０と１の違いは混乱します…。）よろしければご回答いただければ幸いです。

[new1ro]

> flex: 1 1 0%;はなぜこの一行で解決ができるのでしょうか？

flexについて、こちらも正確に理解できているか怪しいところがあるのですが、
flexについての計算は以下の順番の認識です。

1. まずflex-basis、margin、padding、(width?) などで、仮に各子要素の横幅が算出される
2. 余った横幅、足りない横幅を計算し分配/負担
　→横幅が余ったとき、「flex-grow」の値を見て、子要素同士が余った横幅を分配する
　→横幅が足りないとき、「flex-shrink」の値を見て、子要素同士が足りない横幅を負担し合う

上記を踏まえ、すべての子要素に「flex: 1 1 0%;」が指定されている場合を考えると、
以下のような計算になります。
1. まずflex-basis: 0%;なので、すべての子要素の横幅が仮に「0」となる。
2. 使える横幅が余っているので、子要素同士で均等に横幅を分配する

ちなみに、「flex: 1;」というショートコードがあり、こちらを紹介する記事などを見かけるのですが、
他のブラウザと違う解釈をするブラウザがあるらしく、バグの原因になるため、私はflexの仕様を理解する意味も兼ねて「flex: 1 1 0%;」などと書くようにしています。

以下、ブラウザのバグについてまとまった記事です。参考まで..
https://qiita.com/hashrock/items/189db03021b0f565ae27#7-flex-basis%E3%81%8Cborder-box%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84

[yamahaggy]

ご丁寧なお返事ありがとうございます。
私がググった内容と、new1roさんのご説明合わせて腑に落ちるところまでは、理解できたと思います。
ショートコードについては私が読んだ記事にもありました。バグ回避の為flex: 1 1 0%;と書くようにしたいと思います。（そして確かに書いた方が仕様の理解にも良いですね）
大変勉強になりました。ありがとうございました！