この単純なフレックスボックスの例は、ボックスクラスで指定された高さで作成しています。しかし、divの高さは0のままです。インラインで高さを指定すると、達成しようとしていることがわかります。私は何が欠けていますか?フレックスボックスレイアウトでcssクラスの高さを指定する方法
ありがとうございました。どうやらそのスタイルを埋め込むことに問題があったようです。それは魅力のようには機能しません。ありがとう。私はコードを更新しました。事前に
.container {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
text-align: center;
width: 100%;
}
header {
width: 100%;
order: 1;
background-color: lime;
}
.red {
width: 50%;
order: 2;
background-color: red;
}
.orange {
width: 50%;
order: 3;
background-color: orange;
}
footer {
width: 100%;
order: 4;
background-color: magenta;
}
.light_blue {
width: 20%;
order: 5;
background-color: lightblue;
}
.dark_blue {
width: 60%;
order: 6;
background-color: blue;
}
.green {
width: 20%;
order: 7;
background-color: green;
}
<div class="container">
<header class="box lime"></header>
<div class="box red"></div>
<div class="box orange"></div>
<footer class="box"></footer>
<div class="box light_blue"></div>
<div class="box dark_blue"></div>
<div class="box green"></div>
</div>
おかげで、あなたはフレックスレイアウトの高さを定義することができる方法です
あなたの例では、使用しているブラウザ100ピクセル、高さ、と私にボックスを示して? – chrona
何が欠落している可能性がありますか?現在のEdge/Fx/Chr/Saf(IE10や11などのような)以外のものをサポートしている場合は、1 /自動プレフィッカー。2 /コンテンツや高さ=>ヌルの高さがないため、フレックスアイテム(lorem ipsumまたは同様) – FelipeAls