Flex-Kinder, die den übergeordneten Container nicht füllen, wenn flex-basis auf 0 gesetzt ist

Question

Ich habe es mit einem 4-Spalten-Raster zu tun, das eine variable Anzahl von Elementen hat. Das Raster ist reaktionsfähig. Anstatt Pixel-/Em-Werte zu verwenden, verwende ich Prozentsätze in Kombination mit calc, um den rechten Rand zu kompensieren.

Um sicherzustellen, dass die verbleibenden Kästchen einer ungeraden Reihe nicht die Größe ändern und den verbleibenden Platz füllen, setze ich meine Flex-Basis-Eigenschaft auf 0. Das einzige Problem, das bleibt, ist die Boxen selbst sind ein paar Pixel zu füllen übergeordneten Container (beachten Sie, dass die Elemente nicht horizontal das gesamte Raster ausfüllen). Wie kann ich das beheben?

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

die right margin zu 8px sagen erhöhen.

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