For å angi minimal avstand mellom flexbox-elementer bruker jeg margin: 0 5px
på .item
og margin: 0 -5px
på container. For meg virker det som et hack, men jeg kan ikke finne noen bedre måte å gjø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 (bortsett fra CSS-egenskapen gap
som ikke støttes godt i de fleste nettlesere, caniuse).Derfor er det litt vanskeligere å oppnå det du ber om.
Etter min erfaring er den "reneste" måten som ikke bruker :first-child
/ :last-child
og fungerer uten endringer på flex-wrap:wrap
å sette padding:5px
på containeren og margin:5px
på barna. Det vil gi et 10px
gap mellom hvert barn og mellom hvert barn og deres forelder.
[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 bruke gjennomsiktige grenser.
Jeg har tenkt på dette problemet mens jeg prøvde å bygge en fleksibel rutenettmodell som kan falle tilbake til en tabell + tabellcellemodell for eldre nettlesere. Og grenser for kolonnerenner virket for meg det beste passende valget. dvs. tabellceller har ikke marginer.
f.eks.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Legg også merke til at du trenger min-width: 50px;
for flexbox. Flex-modellen vil ikke håndtere faste størrelser med mindre du gjør flex: none;
på det underordnede elementet du vil ha som fast og derfor ekskludert fra å være "flexi"
.
flex:none;
er ikke lenger en flex-modell.
Her er noe nærmere en flex-modell: http://jsfiddle.net/GLpUp/5/
Så du kan faktisk bruke marginer normalt hvis du ikke trenger tabellen-celle fallback for eldre nettlesere. http://jsfiddle.net/GLpUp/3/
Innstillingen background-clip: padding-box;
vil være nødvendig når du bruker en bakgrunn, da bakgrunnen ellers vil flyte inn i det gjennomsiktige kantområdet.
Jeg synes den enkleste måten å gjøre dette på er med prosenter og bare la marginen telle opp bredden din
Dette betyr at du ender opp med noe som dette hvis du bruker eksemplet ditt
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Betyr at verdiene dine er basert på bredden, noe som kanskje ikke er bra for alle.