Betere manier om afstand tussen flexbox items in te stellen

Om de minimale afstand tussen flexbox items in te stellen gebruik ik margin: 0 5px op .item en margin: 0 -5px op container. Voor mij lijkt het een hack, maar ik kan'geen betere manier vinden om dit te doen.

[Example][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
Bewerkte vraag 3de0 december 2018 в 7:27
Programmering
css3 css flexbox
17de1 december 2013 в 5:35
18 views
Oplossing
  • Flexbox heeft geen inklappende marges.
  • Flexbox heeft niets dat lijkt op border-spacing voor tabellen (behalve de CSS eigenschap gap die niet goed ondersteund wordt in de meeste browsers, caniuse)

Daarom is het bereiken van wat je vraagt een beetje moeilijker.

In mijn ervaring is de "cleanest" manier die geen gebruik maakt van :first-child/:last-child en werkt zonder enige aanpassing aan flex-wrap:wrap, om padding:5px in te stellen op de container en margin:5px op de children. Dat geeft een 10px ruimte tussen de kinderen onderling en tussen de kinderen en hun ouder.

[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
Bewerkt antwoord 21ste5 september 2019 в 3:42
Commentaren (9)

U kunt transparante randen gebruiken.

Ik heb over deze kwestie nagedacht toen ik probeerde een flex grid model te bouwen dat kan terugvallen op een tabel + tabel-cel model voor oudere browsers. En randen voor kolomgoten leken mij de meest geschikte keuze. D.w.z. tabelcellen hebben geen marges.

bijv.

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Merk ook op dat je min-width: 50px; nodig hebt voor flexbox. Het flex model zal niet omgaan met vaste maten, tenzij je flex: none; doet op het specifieke child element dat je als vast wilt en dus uitgesloten wilt hebben van "flexi". http://jsfiddle.net/GLpUp/4/ Maar alle kolommen samen met flex:none; is niet langer een flex model. Hier is iets wat dichter bij een flex model komt: http://jsfiddle.net/GLpUp/5/

Je kunt dus eigenlijk normaal marges gebruiken als je de table-cell fallback voor oudere browsers niet nodig hebt. http://jsfiddle.net/GLpUp/3/

Het instellen van background-clip: padding-box; zal nodig zijn als je een achtergrond gebruikt, omdat anders de achtergrond in het transparante randgebied zal vloeien.

Tracker1
Bewerkt antwoord 15de2 maart 2017 в 11:03
Commentaren (9)

De makkelijkste manier om dit te doen is met percentages en de marge op de breedte te laten aansluiten

Dit betekent dat je eindigt met iets als dit als je jouw voorbeeld gebruikt

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Dit betekent wel dat je waarden gebaseerd zijn op de breedte, wat misschien niet voor iedereen goed is.

Commentaren (1)