フレックスベーシスが0に設定されている場合、親コンテナに子が入っていないフレックス

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

8pxを言ってright marginを増やします。

*, 
 
*: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>