Bedre måte å angi avstand mellom flexbox-elementer

For å angi minimal avstand mellom flexbox-elementer bruker jeg margin: 0 5px på .item og margin: 0 -5px på container. For meg virker det som et hack, men jeg kan ikke finne noen bedre måte å gjøre dette på.

[Eksempel][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
Redigerte spørsmål 3. desember 2018 в 7:27
Programmering
css3 css flexbox
17. desember 2013 в 5:35
4 visninger
Løsning
  • Flexbox har ikke kollapsende marginer.
  • Flexbox har ikke noe som ligner på border-spacing for tabeller (bortsett fra CSS-egenskapen gap som ikke støttes godt i de fleste nettlesere, caniuse).

Derfor er det litt vanskeligere å oppnå det du ber om.

Etter min erfaring er den "reneste" måten som ikke bruker :first-child / :last-child og fungerer uten endringer på flex-wrap:wrap å sette padding:5px på containeren og margin:5px på barna. Det vil gi et 10px gap mellom hvert barn og mellom hvert barn og deres forelder.

[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
Redigert svar 21. september 2019 в 3:42
Kommentarer (9)

Du kan bruke gjennomsiktige grenser.

Jeg har tenkt på dette problemet mens jeg prøvde å bygge en fleksibel rutenettmodell som kan falle tilbake til en tabell + tabellcellemodell for eldre nettlesere. Og grenser for kolonnerenner virket for meg det beste passende valget. dvs. tabellceller har ikke marginer.

f.eks.

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

Legg også merke til at du trenger min-width: 50px; for flexbox. Flex-modellen vil ikke håndtere faste størrelser med mindre du gjør flex: none; på det underordnede elementet du vil ha som fast og derfor ekskludert fra å være "flexi". http://jsfiddle.net/GLpUp/4/ Men alle kolonner sammen med flex:none; er ikke lenger en flex-modell. Her er noe nærmere en flex-modell: http://jsfiddle.net/GLpUp/5/

Så du kan faktisk bruke marginer normalt hvis du ikke trenger tabellen-celle fallback for eldre nettlesere. http://jsfiddle.net/GLpUp/3/

Innstillingen background-clip: padding-box; vil være nødvendig når du bruker en bakgrunn, da bakgrunnen ellers vil flyte inn i det gjennomsiktige kantområdet.

Tracker1
Redigert svar 15. mars 2017 в 11:03
Kommentarer (9)

Jeg synes den enkleste måten å gjøre dette på er med prosenter og bare la marginen telle opp bredden din

Dette betyr at du ender opp med noe som dette hvis du bruker eksemplet ditt

#box {
   display: flex;
}

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

Betyr at verdiene dine er basert på bredden, noe som kanskje ikke er bra for alle.

Kommentarer (1)