質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5231閲覧

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

hitoekiaruko

総合スコア12

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/19 05:45

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

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

==========(イメージ)===================

↓PC表示
【画像1】 【画像2】 【画像3】 ←中央揃えで良い感じ

↓スマホ表示
【画像1】(余白あり)←ここの余白をなくして、中央揃えのように表示したい
【画像2】(余白あり)←ここの余白をなくして、中央揃えのように表示したい
【画像3】(余白あり)←ここの余白をなくして、中央揃えのように表示したい

==========(イメージ)===================

==========(コード)===================
『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; /* 左右の余白 */
}

==========(コード)===================

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSS

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

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

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

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

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

投稿2016/12/19 06:09

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hitoekiaruko

2016/12/20 00:27

回答、ありがとうございました! 初歩的な間違いをして、全く気づきませんでした。 Flexの中身のimgに、Divをつけていませんでした。 (正確にいうと、3つのimageをひとつのdivでくくっていた。  なので、質問に記述したHTML文も間違っていました。。) imgタグをひとつずつDivでくくってあげると、 思ったように変更されましたので、出来そうです。 初歩的ミスを気づかせていただき、ありがとうございました。 P.S. モバイルファーストで組む、 単純な考え方も、とても参考になりました。 この方法で組もうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問