画像の大きさはそのままで、左右の空白を増やす方法

Question

display: flex；で画像を横並びで３枚並べました。
flexboxではmarginを使えないということを知り、写真のように画像と画像の間に、空白をとるに至ってません。どうすれば画像の左右にもう少し空白を取ることができるでしょうか。

現段階では、widthの％で無理やり調整してます。

<h2 class="third">コース一覧</h2>
     <div class="thirtiary">
       <p><img src="images/デイトラ/img/web_first.png" alt="初級コースの説明"><br>HTML/CSS/Bootstrap</p>
       <p><img src="images/デイトラ/img/web_second.png" alt="中級コースの説明" ><br>HTML/CSS/JavaScript/jQuery</p>
       <p><img src="images/デイトラ/img/web_third.png" alt="上級コースの説明"><br>PHP/WordPress</p>
     </div>

.thirtiary {
  display: flex;
  justify-content: center;
  overflow: auto;
  width: 85%; 
  margin-left: auto;
  margin-right: auto;

}
.thirtiary img {
   width: 90%;
}

Answer 1

flexの子であるpにwidthが指定されていないのが気になりますが。
justify-contentでいける気がする

/*justify-content: center;*/
  justify-content: space-around;
/*どっちか*/
  justify-content: space-between;

Comments

[sousuke]

flexboxってmargin使えませんでしたっけ。marginがきかないパターンってinlineとかinline-blockのautoぐらいしか思いつかない。

[buchiyuu]

ありがとうございます。
この場合のjustify-content: space-around;はどこに挿入すれば良いのでしょうか？やって見たもののできませんでした。
ちなみに、justify-content: center;をすでに使用してます。

marginについては、僕の説明が間違っていました。
今回はmarginを絶対値で指定することはせずに、画面の幅に対応して、画像の空白が取れるようにしたいと思ってます。

[sousuke]

justify-content: center
のかわりに指定します

[buchiyuu]

ありがとうございました！

Answer 2

justify-content: space-around;
これでできませんか？

私の勘違いでしたらすみません。

Comments

[buchiyuu]

ありがとうございます！
すでにjustify-content: center;を使用してますので、これはどこに挿入すれば良いのでしょうか？

[prog.henry]

centerの部分をspace-aroundに置き変えてみてください

[buchiyuu]

ありがとうございました。

Answer 3

.thirtiaryに対するスタイルにbox-sizing: border-box;を追加し、imgではなく.thirtiary pに対してpadding: 0 2em;など(長さはお好きに)を指定すればいいのでは。

Comments

[buchiyuu]

ありがとうございます！
やって見たところできましたが、画面幅を狭めた際に、左右の画像と中央の画面のサイズの大きさが異なってしまいました。

[Daregada]

.thirtiary p に対して flex: 1; を指定すればいいのでは。

[buchiyuu]

ありがとうございました！