最小幅に関する親幅の100％を埋め込むようにHTML要素をスタイルする

Question

html要素の幅が親幅の100％を占める150px〜200pxの幅にします。

画像1：

（ウィンドウのサイズを変更した後）画像2：

画像3：（もう少しリサイズ）：

イメージ4：（もっと）：私はflexboxを試してみましたが、アイテムの幅の100％充填されていません

：

（フルスクリーンでsinppetを確認してください）

を

.flex { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-justify-content: flex-end; 
 
    justify-content: flex-end; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
    background: #ff0000; 
 
} 
 
.flexitem { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    margin: 5px; 
 
    min-width: 150px; 
 
    max-width: 200px; 
 
    background: #000000; 
 
    border: 1px solid #ffffff; 
 
}

<div class="flex"> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 

 
</div>

Answer 1

最も重要な変更はをできるようにすることですとflex-shrinkを最小幅と最大幅と組み合わせて使用​​します。現在はすべて150〜200ピクセル幅です。最後の行は親を埋めるものではありませんが、これはこれらの幅では不可能です。それとは別に、子要素を持っていないので、私はdisplay:flexを削除しました。子どもがいないので、これは役に立たないのです。あなたのコードに追加する必要があるすべてはflex: 1 1 150pxであり、すべてのflexitem sが150ピクセルと200pxの間になります

.flex { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    justify-content: space-between; 
 
    background:#ff0000; 
 
} 
 

 
.flexitem { 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
    box-sizing: border-box; 
 
    margin: 5px; 
 
    min-width:150px; 
 
    max-width:200px; 
 
    background:#000000; 
 
    border:1px solid #ffffff; 
 
}

<div class="flex"> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    
 
</div>

Answer 2

：私はまた、境界が200pxのあなたの最大に含ま持ってbox-sizing: border-box;を追加しました。

各flexitemが150pxと200pxの間にある場合、ラッピング中に最後の行を100％親幅に塗りつぶすことはできません。これは働くなぜ

：

1. フレックス速記flex: 1 1 150px手段：

   。 flex-growは、1に設定すると許可されます。

   b。 flex-shrinkは、1に設定することで可能です。

   c。 flex-basisはflexitem sが150ピクセルと200pxの間で行かせるmin-widthとmax-widthと

2. flex設定に沿って必要とされるmin-widthに設定されています。しかし

   注意の言葉は：例えばthis参照フレックスと共に、最小値と最大値を使用した場合まれに、いくつかの一貫性のない動作が特にあります。

3. border-box（説明here）で追加し、bodyの余白を削除して終了しました。

ありがとう！

body{ 
 
    margin: 0; 
 
} 
 
*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.flex { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
    background: #ff0000; 
 
} 
 
.flexitem { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    margin: 5px; 
 
    flex: 1 1 150px; 
 
    min-width: 150px; 
 
    max-width: 200px; 
 
    background: #000000; 
 
    border: 1px solid #ffffff; 
 
}

<div class="flex"> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
    <div class="flexitem">&nbsp;</div> 
 
</div>