Bättre sätt att ställa in avståndet mellan flexboxobjekt

För att ställa in det minsta avståndet mellan flexboxobjekt använder jag margin: 0 5px på .item och margin: 0 -5px på container. För mig verkar det vara ett hack, men jag kan inte hitta något bättre sätt att göra detta.

[Exempel][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
Redigerad fråga 2018ör december 2018 в 7:27
Programmering
css3 css flexbox
2013ör december 2013 в 5:35
21 visningar
Lösning
  • Flexbox har inte kollapsande marginaler.
  • Flexbox har inget som liknar "border-spacing" för tabeller (med undantag för CSS-egenskapen "gap" som inte stöds av de flesta webbläsare, caniuse).

Därför är det lite svårare att uppnå det du ber om.

Enligt min erfarenhet är det "renaste" sättet som inte använder :first-child/:last-child och som fungerar utan någon ändring av flex-wrap:wrap att ställa in padding:5px på behållaren och margin:5px på barnen. Det ger ett mellanrum på 10px mellan varje barn och mellan varje barn och dess förälder.

[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
Redigerat svar 2019ör september 2019 в 3:42
Kommentarer (9)

Du kan använda transparenta ramar.

Jag har funderat på den här frågan när jag försökte bygga en flex grid-modell som kan återgå till en tabell + tabellcellsmodell för äldre webbläsare. Och gränser för kolonnrännor verkade för mig vara det lämpligaste valet, eftersom tabellceller inte har marginaler.

t.ex.

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

Observera också att du behöver min-width: 50px; för flexbox. Flexmodellen kommer inte att hantera fasta storlekar om du inte gör flex: none; på det särskilda underelement som du vill ha som fast och därför uteslutet från att vara "flexi". http://jsfiddle.net/GLpUp/4/ Men alla kolumner tillsammans med flex:none; är inte längre en flexmodell. Här är något som ligger närmare en flexmodell: http://jsfiddle.net/GLpUp/5/

Så du kan faktiskt använda marginaler normalt om du inte behöver tabellcellsutfallet för äldre webbläsare. http://jsfiddle.net/GLpUp/3/

Det är nödvändigt att ställa in background-clip: padding-box; när du använder en bakgrund, eftersom bakgrunden annars kommer att flyta in i det genomskinliga gränsområdet.

Tracker1
Redigerat svar 2017ör mars 2017 в 11:03
Kommentarer (9)

Jag tycker att det enklaste sättet att göra detta är att använda procentsatser och låta marginalen summera bredden.

Det betyder att du får något liknande om du använder ditt exempel.

#box {
   display: flex;
}

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

Det betyder dock att dina värden baseras på bredden, vilket kanske inte är bra för alla.

Kommentarer (1)