フレックスボックス内に正方形のdivが必要です。だから私は使用します:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
これはChromeで正常に機能します。しかし、Firefoxでは、親は1行だけに絞り込みます。
Firefoxでこれを解決するにはどうすればよいですか?バージョン44を使用しています。
https://jsbin.com/lakoxi/edit?html,css でコードを表示することもできます。
2018アップデート
flexbox仕様が更新されました。
ブロックボックスのようなフレックスアイテムのマージンとパディングのパーセンテージは、それらを含むブロックのインラインサイズに対して解決されます。左/右/上/下のパーセンテージはすべて、水平書き込みモードで含まれているブロックの幅に対して解決されます。
元の回答-2018年より前にリリースされたFFおよびEdgeバージョンに適用されます
作成者は、フレックスアイテムのパディングやマージンにパーセンテージを使用しないでください。ブラウザによって動作が異なるためです。
ここにいくつかあります:
フレックスアイテムのマージンとパディングのパーセンテージは、次のいずれかに対して解決できます。
- 独自の軸(左/右のパーセンテージは幅に対して解決され、上/下のパーセンテージは高さに対して解決されます)、または、
- インライン軸(左/右/上/下のパーセンテージはすべて幅に対して解決されます)
ユーザーエージェントは、これら2つの動作のいずれかを選択する必要があります。
注:この差異はひどいものですが、世界の現在の状態を正確に捉えています(実装間のコンセンサスはなく、CSSWG内のコンセンサスもありません)。ブラウザーが動作の1つに収束し、その時点で仕様が修正されることがCSSWGの意図です。
Michael_Bの回答 に加えて、考えられる回避策があります。
パーセントを使用する場合、それをビューポートの幅に関連付けることがよくあります。そのことを念頭に置いて、ビューポートの単位vw
/vh
は同様に機能する(レスポンシブ)ため、オプションにすることができます。
スタックスニペット
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50vw;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
コメントに基づいて更新
正方形が必須で、ビューポートユニットまたはスクリプトを使用できない場合は、ダミー画像を使用する別のトリックがあります。
注:イメージとして、SVGまたはBase64をdatauri
として使用して、サーバーへの余分なラウンドトリップを節約できます
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
}
.inner img {
display: block;
width: 100%;
visibility: hidden;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/10" alt="">
</div>
</div>