中央の動的幅のフレックスボックスを作成する方法

Question

このマークアップでは、幅が600px、中央にある30pxの高さのボックスが生成されます。しかし、代わりに、幅を持たないようにボックスを縮小します（または、コンテンツがある場合、コンテンツの最小幅に縮小します）。中央に配置されたボックスは600ピクセルですが、より小さなウィンドウサイズでは反応します。

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

Answer 1

これを試してみてください。 width:100%〜body > div > divとbody > div > div > divクラスを与えます。

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width:100%; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    width:100%; 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

Answer 2

私はその基本的なコンポーネントにコードを単純化することを可能にしてください。 display:flexと設定されているdiv.containerがあります。その中にはフレックスパラメータに従って調整したいdivがあります。内側のdiv要素は、そのコンテナに応じて成長し、縮小するように設定されている：

flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */ 

またautoからmax-width:600px、ページの中央にmargin-leftを持つとmargin-rightセットを持つように設定されています。私はこの構造があなたの要件を満たすと信じています。

div.container { 
 
    display: flex; 
 
    border: 1px solid orange; 
 
} 
 

 
div.container div { 
 
    flex: 1 1 auto; 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    margin: 0 auto 0 auto; 
 
    max-width: 600px; 
 
}

<div class="container"> 
 
    <div></div> 
 
</div>

Answer 3

インラインブロックと同様の内容と同じくらい広いこと、フレックスアイテムのデフォルトの動作となります。

デフォルトのflex-growの値は0であり、残りのスペースを埋めるものではないという理由があります。

フレックスアイテムのすべてのレベルに、親を埋めるようにflex-grow: 1を追加します。

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    flex-grow: 1;     /* added */ 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    flex-grow: 1;     /* added */ 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>