Parem viis flexboxi elementide vahelise kauguse määramiseks

Flexboxi elementide vahelise minimaalse vahemaa määramiseks kasutan .item'ilemargin: 0 5pxja konteinerilemargin: 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>
Salman A
Redigeeritud küsimus T00 detsember 2018 в 7:27
Programmeerimine
css3 css flexbox
T11 detsember 2013 в 5:35
43 vaated
Lahendus
  • Flexboxil ei ole kokkuklappivaid marginaale.
  • Flexboxil ei ole midagi sarnast nagu tabelite jaoks 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:wrapi muutmata, määrata padding:5px konteinerile ja margin:5px lastele. See tekitab 10px vahe iga lapse ning iga lapse ja tema vanema vahel.

[Demo](http://jsfiddle.net/7XD8s/)

.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>
Flimm
Redigeeritud vastus T55 september 2019 в 3:42
Kommentaarid (9)

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". http://jsfiddle.net/GLpUp/4/. Aga kõik veerud koos 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.

Tracker1
Redigeeritud vastus T22 märts 2017 в 11:03
Kommentaarid (9)

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.

Kommentaarid (1)