2017-01-10 2 views
0

この単純なフレックスボックスの例は、ボックスクラスで指定された高さで作成しています。しかし、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>

おかげで、あなたはフレックスレイアウトの高さを定義することができる方法です

+1

あなたの例では、使用しているブラウザ100ピクセル、高さ、と私にボックスを示して? – chrona

+0

何が欠落している可能性がありますか?現在のEdge/Fx/Chr/Saf(IE10や11などのような)以外のものをサポートしている場合は、1 /自動プレフィッカー。2 /コンテンツや高さ=>ヌルの高さがないため、フレックスアイテム(lorem ipsumまたは同様) – FelipeAls

答えて

1

。 フレックスボックスは、フレックスコンテナとフレックスアイテムで構成されています。

フレックスコンテナは、要素の表示プロパティをflex(ブロックとしてレンダリング)またはinline-flex(インラインでレンダリング)に設定することによって宣言されます。

フレックスコンテナの内部には、1つ以上のフレックスアイテムがあります。

注:フレックスコンテナの外側とフレックスアイテムの内側のすべてが通常通りレンダリングされます。 Flexboxは、フレックスアイテムがフレックスコンテナ内でどのように配置されるかを定義します。

フレックスアイテムは、フレックスラインに沿ってフレックスコンテナ内に配置されます。デフォルトでは、フレックスコンテナごとにフレックスラインが1つしかありません。

次の例は、3つのフレックスアイテムを示しています。彼らは、デフォルトで配置されている:水平フレックスラインに沿って、左から右へ:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    width: 400px; 
    height: 250px; 
    background-color: lightgrey; 
} 

.flex-item { 
    background-color: cornflowerblue; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
} 
</style> 
</head> 
<body> 

<div class="flex-container"> 
    <div class="flex-item">flex item 1</div> 
    <div class="flex-item">flex item 2</div> 
    <div class="flex-item">flex item 3</div> 
</div> 

</body> 
</html> 

enter image description here

関連する問題