樣式化HTML元素以填充關於最小寬度的父寬度的100％

Question

我希望html元素的寬度在150px和200px之間，它們填充父寬度的100％。

圖片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-grow和flex-shrink結合最小和最大寬度。現在它們都在150到200px之間。最後一行不填充父項，這在這些寬度下是不可能的。除此之外，我刪除display:flex對子元素 - 因爲他們沒有孩子，這是沒有用的。我還添加了box-sizing: border-box;有包含在你的最大的200像素的邊界：

.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

所有你需要添加到你的代碼是flex: 1 1 150px和所有flexitem旨意是150像素和200像素之間。

請注意，如果每個flexitem介於150像素和200像素之間，那麼顯然不可能在包裝時將最後一行填充到100％父級寬度。

爲什麼這個工程：

1. 的柔性速記flex: 1 1 150px手段：

   一個。允許將flex-grow設置爲1

   b。 flex-shrink被允許設置爲1

   c。 flex-basis設定爲所需

2. 的flex設置連同min-width和max-width的min-width使flexitem小號150像素和200像素之間去。

   謹慎雖然一個字：在極少數情況下，有一些不一致的行爲特別是使用最小值和最大值隨着flex-看到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>