flexboxが適用されない

前提・実現したいこと

要素を3つ均等な間隔で並べたい。
左右のみ間隔を広げたい。

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

flexを指定しても反映されない。

該当のソースコード


      <div class="photos">
        <div class="photo">
          <img src="img/card-image1@2x.jpg">
            <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
        </div>

        <div class="photo">
          <img src="img/card-image2@2x.jpg">
            <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>          
        </div>

        <div class="photo">
          <img src="img/card-image3@2x.jpg">         
            <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>          
          </div>

.photos {
  display: flex;
  flex-direction: row;
  width: 80%;
}
.photo {
  border :solid 1px rgb(121, 114, 114);
  justify-content: space-evenly;
}

試したこと

margin 0 autoで指定
paddingを左右に指定
text-align: centerを指定

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

写真の下にテキストを記入し、それぞれを四角で囲んだものをページに3つ横並びで配たいです。
それぞれ均等に間隔をあけて、ページの端(左右)のみ広めに間隔をあけたいです。
拙い文章ですが、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

現状のコードの場合、.photoの幅が、テキストの長さに応じて広がってしまうので、.photoと.photoの間にギャップが空かないのではないでしょうか。例えば、gapを指定するとか、.photoの幅を制限すれば改善すると思います。

それと、justify-contentを指定するなら、.photoじゃなくて.photosの方(つまりdisplay: flexな要素の方)に指定しましょう。

最後に、ページ左右の余白は、左右のmarginをautoにして、widthで調整できると思います。

以下、作例です。

css
1.photos {
2  display: flex;
3  justify-content: space-between;
4  width: 80%;
5  margin: 0 auto;
6}
7.photo {
8  border :solid 1px rgb(121, 114, 114);
9  max-width: 30%;
10}
11.photo img {
12  display: block;
13  max-width: 100%;
14  margin: 0 auto;
15}

html
1<div class="photos">
2    <div class="photo">
3        <img src="https://via.placeholder.com/150">
4        <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
5    </div>
6    <div class="photo">
7        <img src="https://via.placeholder.com/150">
8        <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>          
9    </div>
10    <div class="photo">
11        <img src="https://via.placeholder.com/150">
12        <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>          
13    </div>
14</div>