Bessere Möglichkeit, den Abstand zwischen Flexbox-Elementen festzulegen

Um den minimalen Abstand zwischen flexbox Elemente I'm mit margin: 0 5px auf .item und margin: 0 -5px auf Container. Für mich scheint es wie ein Hack, aber ich kann nicht finden, einen besseren Weg, dies zu tun.

[Beispiel][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
Bearbeitete Frage 3. Dezember 2018 в 7:27
Programmierung
css3 css flexbox
17. Dezember 2013 в 5:35
26 Aufrufe
Lösung
  • Flexbox hat keine kollabierenden Ränder.
  • Flexbox hat nichts, was mit "Randabständen" für Tabellen vergleichbar wäre (mit Ausnahme der CSS-Eigenschaft "gap", die von den meisten Browsern nicht gut unterstützt wird, caniuse)

Daher ist es etwas schwieriger, das zu erreichen, wonach Sie fragen.

Meiner Erfahrung nach ist der sauberste Weg, der ohne :first-child/:last-child auskommt und ohne Änderungen an flex-wrap:wrap funktioniert, padding:5px für den Container und margin:5px für die Kinder zu setzen. Das erzeugt einen Abstand von 10px zwischen jedem Kind und zwischen jedem Kind und seinem Elternteil.

[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
Bearbeitete Antwort 21. September 2019 в 3:42
Kommentare (9)

Sie können transparente Rahmen verwenden.

Ich habe über dieses Thema nachgedacht, während ich versucht habe, ein flexibles Gittermodell zu erstellen, das auf ein Tabellen- und Tabellenzellenmodell für ältere Browser zurückgreifen kann. Und Borders für Spalte Rinnen schien mir die beste geeignete Wahl. d.h. Tabelle-Zellen don & #39; t haben Ränder.

z.B..

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

Beachten Sie auch, dass Sie min-width: 50px; für flexbox benötigen. Das Flex-Modell kann keine festen Größen handhaben, es sei denn, Sie verwenden flex: none; für das bestimmte untergeordnete Element, das Sie als feststehend und daher nicht als "flexi&quot"-Element haben wollen. http://jsfiddle.net/GLpUp/4/ Aber alle Spalten zusammen mit flex:none; ist nicht mehr ein Flex-Modell. Hier ist etwas, das einem Flex-Modell näher kommt: http://jsfiddle.net/GLpUp/5/

Sie können also Ränder ganz normal verwenden, wenn Sie den Tabellenzellen-Fallback für ältere Browser nicht brauchen. http://jsfiddle.net/GLpUp/3/

Die Einstellung background-clip: padding-box; ist notwendig, wenn ein Hintergrund verwendet wird, da der Hintergrund sonst in den transparenten Randbereich fließt.

Tracker1
Bearbeitete Antwort 15. März 2017 в 11:03
Kommentare (9)

Ich finde, am einfachsten geht das mit Prozentsätzen und der Möglichkeit, die Breite durch den Rand auszugleichen.

Wenn Sie Ihr Beispiel verwenden, erhalten Sie also etwa folgendes Ergebnis

#box {
   display: flex;
}

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

Das bedeutet, dass Ihre Werte auf der Breite basieren, was nicht für jeden gut ist.

Kommentare (1)