Aby ustawić minimalną odległość pomiędzy elementami flexbox I'm using margin: 0 5px
on .item
and margin: 0 -5px
on container. Dla mnie wydaje się to być hack, ale nie mogę znaleźć lepszego sposobu na zrobienie tego.
[Przykład][1]
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
border-spacing
dla tabel (z wyjątkiem właściwości CSS gap
, która nie jest'dobrze wspierana w większości przeglądarek, caniuse).Dlatego osiągnięcie tego, o co prosisz, jest nieco trudniejsze.
Z mojego doświadczenia, "najczystszym" sposobem, który'nie używa :first-child
/:last-child
i działa bez żadnych modyfikacji na flex-wrap:wrap
jest ustawienie padding:5px
na kontenerze i margin:5px
na dzieciach. Spowoduje to powstanie 10px
przerwy pomiędzy każdym z dzieci oraz pomiędzy każdym z dzieci a ich rodzicem.
[Demo](
).upper
{
margin:30px;
display:flex;
flex-direction:row;
width:300px;
height:80px;
border:1px red solid;
padding:5px; /* this */
}
.upper > div
{
flex:1 1 auto;
border:1px red solid;
text-align:center;
margin:5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
Możesz użyć przezroczystych obramowań.
Zastanawiałem się nad tym problemem, próbując zbudować model siatki flex, który może powrócić do modelu tabel + table-cell dla starszych przeglądarek. A Borders dla rynien kolumn wydawały mi się najlepszym właściwym wyborem. tj. Table-cells nie mają marginesów.
np.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Zauważ również, że potrzebujesz min-width: 50px;
dla flexbox. Model flex nie będzie obsługiwał stałych rozmiarów, chyba że zrobisz flex: none;
na konkretnym elemencie dziecka, który ma być stały i dlatego wyłączony z bycia "flexi"
.
flex:none;
nie są już modelem flex.
Tutaj jest coś bliższego modelowi flex: http://jsfiddle.net/GLpUp/5/
Więc możesz właściwie używać marginesów normalnie, jeśli nie potrzebujesz fallback'u table-cell dla starszych przeglądarek. http://jsfiddle.net/GLpUp/3/
Ustawienie background-clip: padding-box;
będzie konieczne, gdy używasz tła, ponieważ w przeciwnym razie tło będzie przepływać do przezroczystego obszaru obramowania.
Uważam, że najłatwiejszym sposobem na zrobienie tego jest użycie procentów i pozwolenie, aby margines zrównał się z szerokością.
Oznacza to, że skończysz z czymś takim, jeśli użyjesz swojego przykładu
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Oznacza to, że twoje wartości są oparte na szerokości, co może nie być dobre dla wszystkich.