Flexboxi elementide vahelise minimaalse vahemaa määramiseks kasutan .item'ile
margin: 0 5pxja konteinerile
margin: 0 -5px`. Minu jaoks tundub see häkkida, kuid ma ei'ei leia paremat võimalust.
[näide][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
(välja arvatud CSS-omadus gap
, mis ei ole enamikus brauserites hästi toetatud, caniuse).Seetõttu on teie soovide saavutamine veidi keerulisem.
Minu kogemuse kohaselt on "kõige puhtam" viis, mis ei kasuta :first-child
/:last-child
ja töötab ilma flex-wrap:wrap
i muutmata, määrata padding:5px
konteinerile ja margin:5px
lastele. See tekitab 10px
vahe iga lapse ning iga lapse ja tema vanema vahel.
[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>
Võite kasutada läbipaistvaid piire.
Olen seda küsimust kaalunud, kui üritasin luua flex grid-mudelit, mis võib vanemate brauserite puhul minna tagasi tabelite + tabeliruutude mudelile. Ja Borders veeru künade jaoks tundus mulle parim sobiv valik. st Table-cells don't on marginaalid.
nt.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Pange tähele, et flexboxi jaoks on vaja min-width: 50px;
. Flex-mudel ei saa käsitleda fikseeritud suurusi, kui te ei tee flex: none;
konkreetsele lapselemendile, mida soovite fikseeritud ja seega välistatud "flexi"
.
flex:none;
ga ei ole enam flex-mudel.
Siin on midagi, mis on flex-mudelile lähemal: http://jsfiddle.net/GLpUp/5/
Nii et sa võid tegelikult kasutada marginaale normaalselt, kui sa ei'vaja tabeli lahtrite tagasilangust vanemate brauserite jaoks. http://jsfiddle.net/GLpUp/3/
Tausta kasutamisel on vajalik background-clip: padding-box;
seadistamine, sest muidu valgub taust läbipaistvasse piirialasse.
Minu arvates on kõige lihtsam viis seda teha protsentidega ja lihtsalt lubada marginaalil oma laiust kokku lugeda
See tähendab, et kui te kasutate oma näidet, siis saate midagi sellist, kui te kasutate oma näidet
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
See tähendab, et teie väärtused põhinevad laiusel, mis ei pruugi kõigile sobida.