CSS Flexbox モバイル表示時（縦並び）に、画像を中央揃えしたい

Question

レスポンシブ対応のため、
Flexboxで、３つの画像を 横並び表示させています。

スマホなどで見た際に、
１画像ずつの縦並びになってはくれるのですが、
それを、中央揃えにする方法が分かりません。

＝＝＝＝＝＝＝＝＝＝（イメージ）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

↓PC表示
【画像１】 【画像２】 【画像３】 ←中央揃えで良い感じ

↓スマホ表示
【画像１】（余白あり）←ここの余白をなくして、中央揃えのように表示したい
【画像２】（余白あり）←ここの余白をなくして、中央揃えのように表示したい
【画像３】（余白あり）←ここの余白をなくして、中央揃えのように表示したい

＝＝＝＝＝＝＝＝＝＝（イメージ）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝（コード）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
『HTML』

<div class="standard-flexbox-center"> <img src="http://image1.png" /> <img src="http://image2.png" /> <img src="http://image3.png" /> </div>

『CSS』
.standard-flexbox-center {
display: -webkit-flex; /* Safari /
display: flex;
-webkit-justify-content: center; / Safari （中央）*/
justify-content: center;
}

.standard-flexbox-center div{
margin: 10px 10px; /* 左右の余白 */
}

＝＝＝＝＝＝＝＝＝＝（コード）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

初歩的かもしれないですが、
よろしくお願いいたします。

Answer 1

.standard-flexbox-center div{ 
margin: 10px 10px; /* 左右の余白 */ 
}

.standard-flexbox-centerの直下にdivがありませんのでこのコードは効かないと思いますが
記載しているHTMLが間違ってますか？
以下、ひとつひとつのimgをdivで囲んでいると仮定して話を進めますが、一番単純なのは、

1. モバイルファーストで組む
2. SPレイアウト時はflexboxを適用せず、普通に縦並びにしておく
3. PCレイアウト時のみflexboxでの横並びを適用する

でしょうか。
flexboxを適用しないSPレイアウトは、divの中にimgが入っているだけの状態なので、
センター寄せしたければ単純にtext-align:centerで画像は中央寄せになります。

PCレイアウト用のコードはメディアクエリで適宜条件分岐して、今書いているflexboxのコードを
入れておけば良いでしょう。

Comments

[hitoekiaruko]

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

初歩的な間違いをして、全く気づきませんでした。

Flexの中身のimgに、Divをつけていませんでした。
（正確にいうと、３つのimageをひとつのdivでくくっていた。
　なので、質問に記述したHTML文も間違っていました。。）

imgタグをひとつずつDivでくくってあげると、
思ったように変更されましたので、出来そうです。
初歩的ミスを気づかせていただき、ありがとうございました。

P.S.
モバイルファーストで組む、
単純な考え方も、とても参考になりました。
この方法で組もうと思います。