Per impostare la distanza minima tra gli elementi di flexbox sto usando margin: 0 5px
su .item
e margin: 0 -5px
su container. Per me sembra un hack, ma non riesco a trovare un modo migliore per farlo.
[Esempio][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
per le tabelle (tranne la proprietà CSS gap
che non è ben supportata nella maggior parte dei browser, caniuse)Quindi realizzare ciò che stai chiedendo è un po' più difficile.
Nella mia esperienza, il modo più "pulito" che non usa :first-child
/:last-child
e funziona senza alcuna modifica su flex-wrap:wrap
è impostare padding:5px
sul contenitore e margin:5px
sui figli. Questo produrrà uno spazio di 10px
tra ogni bambino e tra ogni bambino e il suo genitore.
[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>
Puoi usare bordi trasparenti.
Ho contemplato questo problema mentre cercavo di costruire un modello di griglia flessibile che può ripiegare su un modello di tabelle + tabella-celle per i vecchi browser. E i bordi per le grondaie delle colonne mi sembravano la scelta più appropriata, cioè le table-cell non hanno margini.
es.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Nota anche che hai bisogno di min-width: 50px;
per flexbox. Il modello flex non gestirà dimensioni fisse a meno che tu non faccia flex: none;
sul particolare elemento figlio che vuoi come fisso e quindi escluso dall'essere "flexi"
.
flex:none;
non è più un modello flex.
Ecco qualcosa di più vicino a un modello flex: http://jsfiddle.net/GLpUp/5/
Quindi puoi effettivamente usare i margini normalmente se non hai bisogno del fallback della cella della tabella per i vecchi browser. http://jsfiddle.net/GLpUp/3/
L'impostazione di background-clip: padding-box;
sarà necessaria quando si usa uno sfondo, perché altrimenti lo sfondo fluirà nell'area del bordo trasparente.
Trovo che il modo più semplice per farlo sia con le percentuali e lasciare che il margine sia pari alla vostra larghezza
Questo significa che ti ritrovi con qualcosa del genere se usi il tuo esempio
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Significa che i tuoi valori sono basati sulla larghezza, il che potrebbe non essere buono per tutti.