cssのflexで挙動が違う

締切済

質問者：dcx147
質問日時：2016/01/09 00:44
回答数：1件

display:flexで横並びを作成しているのですが、画像があると挙動がおかしいです。

実現したいことは・・・
スマホでは画像の下に文字を表示。
PCでは画像と文字を横並びにしたいと考えております。

IE11で見ると画像と文字の間に大きな余白ができてしまいます。
※画像は2000pxサイズでテストしています

■html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="inner">
<div class="flex">
<div><img src="image.jpeg" alt="あいうえお"></div>
<div>かきくけこ</div>
</div>
<div class="flex">
<div>あいうえお</div>
<div>かきくけこ</div>
</div>
</div>
</body>
</html>

■css
.inner {
margin: auto;
width: 90%;
}
.flex {
display: -webkit-flex;
display: flex;
}
img {
max-width: 100%;
}
@media screen and (max-width: 480px) {
.flex {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
}

画像の部分を文字にすると隙間は表示されないので、画像を縮小した際のバグ的なもの？
かと思っているのですが、このような場合はどうすれば解決できますでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2016/01/11 18:44

HTMLとCSSの基本から学びなおしましょう。

まずはHTML4.01とCSS2.1でよいですから、仕様書程度は最初に通読しておきましょう。
HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
　HTMLは文書構造をマークアップするものでデザインのためではありません。→構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　たとえば、div要素は、HTML4.01の時代から『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であって、決してデザインのためではありません。<div class="inner"><div class="flex">のように間違った使い方があまりに多いため、HTML5では文書構造を示す<header><section><footer><nav><aside>のような新しい要素が導入され、divは原則使えなくなりました。
　そしてdivは原則使わない。
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
★著者は他に適切な要素がない時の最後の最後の手段としてdiv要素を使うよう強く推奨される。

★他に適当な要素がない場合にも、必ず文書構造をしめすものにする。
　class="frex" だと意味が分からないし、将来display:inline-blockとかにしようとした時、齟齬が生じるでしょ。
　また、スタイルシートは、CSS2以降は起点セレクタから書くことになっています。
『単体セレクタは型セレクタもしくは全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )』
　そしてセレクタはHTMLの文書構造に従って記述する。

＞実現したいことは・・・
＞スマホでは画像の下に文字を表示。
＞PCでは画像と文字を横並びにしたいと考えております。
＞img {max-width: 100%;}

　でしたら、まだ勧告に至っていない不安定なflexを使わなくても簡単に実現できます。CSS2.1で十分です。
※それがheader内にあるナビゲーションだとして書くと

<body>
　<header>
　　<h1>ページタイトル</h1>
　　<nav>
　　　<ul>
　　　　<li><img src="" width="" height="" alt="">
　　　　　　<p>画像の説明</p>
　　　　　　<p>画像の説明</p>
　　　　</li>
　　　　<li><img src="" width="" height="" alt="">
　　　　　　<p>画像の説明</p>
　　　　　　<p>画像の説明</p>
　　　　</li>
　　　</ul>
　　</nav>
　</header>
というHTMLをまず書きます。
スタイルシートはパソコンの場合
header nav ol{list-style:none;margin:5px 0;padding:0;}
header nav ol li{display:block;margin:0;padding:0;width:100%;}
header nav ol li img{width:50%;height:auto;}
だけで済む
タブレットやスマホには
header nav ol li img{display:block;width:100%;}

ちなみに、HTML4.01でしたら、
<body>
　<dic class="header">
　　<h1>ページタイトル</h1>
　　<div class="nav">
　　　<ul>
　　　　<li><img src="" width="" height="" alt="">
　　　　　　<p>画像の説明</p>
　　　　　　<p>画像の説明</p>
　　　　</li>
　　　　<li><img src="" width="" height="" alt="">
　　　　　　<p>画像の説明</p>
　　　　　　<p>画像の説明</p>
　　　　</li>
　　　</div>
　　</ul>
　</div>
となります。

やつと本題ですが、HTMLを見ても構造がわからないために、実はされたいことが見えてこない。
あなたが挙げられている

<div class="inner">
　<div class="flex">
　　<div><img src="image.jpeg" alt="あいうえお"></div>
　　<div>かきくけこ</div>
　</div>
　<div class="flex">
　　<div>あいうえお</div>
　　<div>かきくけこ</div>
　</div>
</div>
の部分を意味が分かるように書き直したうえで、それぞれをどのように配置したいかを図示してください。