當flex-basis設置爲0時，Flex兒童未填充父容器

Question

我正在處理具有可變數量項目的4列網格。該網格是響應式的，所以不是使用像素/ em值，而是使用百分比和calc來彌補右邊距。

爲了確保不均勻行的剩餘空間不會調整大小並填充剩餘空間，我將我的flex-basis屬性設置爲0.唯一的問題是盒子本身的幾個像素不足以填充父容器（注意項目如何不能水平填充整個網格）。我怎樣才能解決這個問題？

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    font-family: Helvetica; 
 
} 
 

 
.container { 
 

 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    border: 4px solid #000; 
 
    margin: 0 auto; 
 
    width: 400px; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-child { 
 
    flex: 0 1 calc(25% - 6px); 
 
    background: tomato; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    margin-bottom: 6px; 
 
} 
 

 
.flex-child:not(:nth-of-type(4n)) { 
 
    margin-right: 6px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-child">1</div> 
 
    <div class="flex-child">2</div> 
 
    <div class="flex-child">3</div> 
 
    <div class="flex-child">4</div> 
 
    <div class="flex-child">5</div> 
 
    <div class="flex-child">6</div> 
 
    <div class="flex-child">7</div> 
 
    <div class="flex-child">8</div> 
 
    <div class="flex-child">9</div> 
 
    <div class="flex-child">10</div> 
 
</div>

Answer 1

增加right margin說8px。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    font-family: Helvetica; 
 
} 
 

 
.container { 
 

 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    border: 4px solid #000; 
 
    margin: 0 auto; 
 
    width: 400px; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-child { 
 
    flex: 0 1 calc(25% - 6px); 
 
    background: tomato; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    margin-bottom: 6px; 
 
} 
 

 
.flex-child:not(:nth-of-type(4n)) { 
 
    margin-right: 8px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-child">1</div> 
 
    <div class="flex-child">2</div> 
 
    <div class="flex-child">3</div> 
 
    <div class="flex-child">4</div> 
 
    <div class="flex-child">5</div> 
 
    <div class="flex-child">6</div> 
 
    <div class="flex-child">7</div> 
 
    <div class="flex-child">8</div> 
 
    <div class="flex-child">9</div> 
 
    <div class="flex-child">10</div> 
 
    <div class="flex-child">11</div> 
 
    <div class="flex-child">12</div> 
 
    <div class="flex-child">13</div> 
 
    <div class="flex-child">14</div> 
 
</div>