/ / Ako nastaviť špecifickú medzeru flexbox v CSS - html, css, css3, flexbox, rozloženie mriežky

Ako nastaviť špecifickú medzeru flexboxu v CSS - html, css, css3, flexbox, rozloženie mriežky

Snažím sa dosiahnuť flexbox rozloženie s jedným flex-grow prvok a variabilný počet menších prvkov okolo neho. Potrebujem medzeru medzi prvkami, ktoré majú pevnú šírku - presne jeden pixel. Tu je schéma toho, čo chcem:

Modrý prvok rastie, aby vyplnil priestor, ale medzi jednotlivými prvkami má 1px medzeru.

Ako vytvorím túto medzeru s pevnou šírkou?


Možné riešenie, ktoré nie je flexibilné

Nevedel som, ako dosiahnuť presnú 1 pixelovú medzeru flexbox, tak som sa snažil vytvoriť v a grid layout. Narazil som na inú otázku, že nemám flex-grow majetok pre detské siete:

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

odpovede:

3 pre odpoveď č. 1

Môžete použiť okraj / polstrovanie na vytvorenie tejto medzery:

.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>