Um den minimalen Abstand zwischen flexbox Elemente I'm mit margin: 0 5px
auf .item
und margin: 0 -5px
auf Container. Für mich scheint es wie ein Hack, aber ich kann nicht finden, einen besseren Weg, dies zu tun.
[Beispiel][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>
Daher ist es etwas schwieriger, das zu erreichen, wonach Sie fragen.
Meiner Erfahrung nach ist der sauberste Weg, der ohne :first-child
/:last-child
auskommt und ohne Änderungen an flex-wrap:wrap
funktioniert, padding:5px
für den Container und margin:5px
für die Kinder zu setzen. Das erzeugt einen Abstand von 10px zwischen jedem Kind und zwischen jedem Kind und seinem Elternteil.
[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>
Sie können transparente Rahmen verwenden.
Ich habe über dieses Thema nachgedacht, während ich versucht habe, ein flexibles Gittermodell zu erstellen, das auf ein Tabellen- und Tabellenzellenmodell für ältere Browser zurückgreifen kann. Und Borders für Spalte Rinnen schien mir die beste geeignete Wahl. d.h. Tabelle-Zellen don & #39; t haben Ränder.
z.B..
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Beachten Sie auch, dass Sie min-width: 50px;
für flexbox benötigen. Das Flex-Modell kann keine festen Größen handhaben, es sei denn, Sie verwenden flex: none;
für das bestimmte untergeordnete Element, das Sie als feststehend und daher nicht als "flexi""-Element haben wollen.
flex:none;
ist nicht mehr ein Flex-Modell.
Hier ist etwas, das einem Flex-Modell näher kommt: http://jsfiddle.net/GLpUp/5/
Sie können also Ränder ganz normal verwenden, wenn Sie den Tabellenzellen-Fallback für ältere Browser nicht brauchen. http://jsfiddle.net/GLpUp/3/
Die Einstellung background-clip: padding-box;
ist notwendig, wenn ein Hintergrund verwendet wird, da der Hintergrund sonst in den transparenten Randbereich fließt.
Ich finde, am einfachsten geht das mit Prozentsätzen und der Möglichkeit, die Breite durch den Rand auszugleichen.
Wenn Sie Ihr Beispiel verwenden, erhalten Sie also etwa folgendes Ergebnis
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Das bedeutet, dass Ihre Werte auf der Breite basieren, was nicht für jeden gut ist.