/ / Jak ustawić konkretną lukę flexbox w CSS - html, css, css3, flexbox, grid-layout

Jak ustawić konkretną lukę flexbox w CSS - html, css, css3, flexbox, grid-layout

Próbuję osiągnąć a flexbox układ z tylko jednym flex-grow element i zmienna liczba mniejszych elementów wokół niego. Potrzebuję luki między elementami, które mają stałą szerokość - dokładnie jeden piksel. Oto schemat tego, co chcę:

Niebieski element powiększa się, aby wypełnić przestrzeń, ale ma 1px lukę pomiędzy każdym elementem.

Jak utworzyć tę przerwę o stałej szerokości?


Potencjalne rozwiązanie bez pakietu Flexbox

Nie wiedziałem, jak osiągnąć tę dokładną 1-pikselową przerwę flexbox, więc próbowałem stworzyć go w grid układ. Wpadłem na inny problem z brakiem flex-grow właściwość dla dzieci w siatce:

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

Odpowiedzi:

3 dla odpowiedzi № 1

Możesz użyć marginesu / dopełnienia, aby utworzyć tę lukę:

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