For at indstille den minimale afstand mellem flexbox-elementer bruger jeg margin: 0 5px
på .item
og margin: 0 -5px
på container. For mig virker det som et hack, men jeg kan ikke finde nogen bedre måde at gøre dette på.
[Eksempel][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
for tabeller (bortset fra CSS-egenskaben gap
, som ikke er godt understøttet i de fleste browsere, caniuse).Derfor er det lidt sværere at opnå det, du beder om.
Min erfaring er, at den "reneste" måde, der ikke bruger :first-child
/:last-child
og virker uden nogen ændring på flex-wrap:wrap
, er at sætte padding:5px
på containeren og margin:5px
på børnene. Det vil give et mellemrum på 10px mellem hvert barn og mellem hvert barn og dets forælder.
[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>
Du kan bruge gennemsigtige rammer.
Jeg har overvejet dette spørgsmål, mens jeg forsøgte at bygge en flex grid-model, som kan falde tilbage til en tabel + tabel-celle-model for ældre browsere. Og Borders til kolonnegrenene syntes mig at være det bedst egnede valg. dvs. tabel-celler har ikke margener.
f.eks.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Bemærk også, at du har brug for min-width: 50px;
for flexbox. Flex-modellen vil ikke håndtere faste størrelser, medmindre du gør flex: none;
på det særlige underelement, du ønsker som fast og derfor udelukket fra at være "flexi"
.
flex:none;
er ikke længere en flexmodel.
Her er noget, der er tættere på en flex-model: http://jsfiddle.net/GLpUp/5/
Så du kan faktisk godt bruge marginer normalt, hvis du ikke har brug for table-cell fallback for ældre browsere. http://jsfiddle.net/GLpUp/3/
Indstilling af background-clip: padding-box;
vil være nødvendig, når du bruger en baggrund, da baggrunden ellers vil flyde ind i det gennemsigtige grænseområde.
Jeg synes, at den nemmeste måde at gøre dette på er med procenter og bare lade margenen tælle op til din bredde
Det betyder, at du ender med noget som dette, hvis du bruger dit eksempel
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Det betyder dog, at dine værdier er baseret på bredden, hvilket måske ikke er godt for alle.