Wie man eine spezifische Flexbox-Lücke in CSS setzt - html, css, css3, flexbox, grid-layout

Ich versuche, a flexbox Layout mit nur einem flex-grow Element und eine variable Anzahl von kleineren Elementen um ihn herum. Ich brauche eine Lücke zwischen den Elementen, die eine feste Breite haben - genau ein Pixel. Hier ist ein Diagramm dessen, was ich will:

Das blaue Element wächst, um den Raum zu füllen, hat aber zwischen jedem Element eine 1px-Lücke.

Wie erstelle ich diese Lücke mit fester Breite?

Mögliche Nicht-Flexbox-Lösung

Ich wusste nicht, wie ich genau diese 1-Pixel-Lücke erreichen konnte flexbox, also habe ich versucht, es in einem zu schaffen grid Layout. Ich stieß auf eine andere Frage, keine zu haben flex-grow Eigenschaft für Gitterkinder:

.box {
display: grid;
grid-auto-flow: column;
grid-gap: 1px;
}
.big-element {
// <- Need something similar to flex-grow for this element
}

Antworten:

Sie können margin / padding verwenden, um diese Lücke zu erstellen:

.container {
border: 1px solid;
display: flex;
height: 20px;
margin:10px 0;
padding: 1px 0 1px 1px;
}

.e {
flex: 1;
margin-right: 1px;
background: red;
}

.b {
width: 200px;
margin-right: 1px;
background: green;
}

<div class="container">
<div class="e"></div>
<div class="e"></div>
<div class="b"></div>
</div>
<div class="container">
<div class="e"></div>
<div class="e"></div>
<div class="b"></div>
<div class="e"></div>
<div class="b"></div>
</div>
<div class="container">
<div class="e"></div>
<div class="e"></div>
<div class="e"></div>
<div class="b"></div>
<div class="e"></div>
<div class="e"></div>
<div class="e"></div>
<div class="e"></div>
</div>