it-swarm.com.de

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

Um den Mindestabstand zwischen den Flexbox-Elementen festzulegen, verwende ich margin: 0 5px für .item und margin: 0 -5px für Container. Für mich scheint es ein Hack zu sein, aber ich kann keinen besseren Weg finden, dies zu tun.

Beispiel

#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>

482
Sasha Koss
  • Flexbox hat keine zusammenbrechenden Ränder.
  • Flexbox hat nichts Ähnliches wie border-spacing für Tabellen.

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

Nach meiner Erfahrung besteht der "sauberste" Weg, der :first-child/:last-child nicht verwendet und ohne Änderung an flex-wrap:wrap funktioniert, darin, padding:5px für den Container und margin:5px für die Kinder festzulegen. Dies führt zu einer 10px-Lücke zwischen jedem Kind und zwischen jedem Kind und seinen Eltern.

Demo

.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>

263
user652649

Dies ist kein Hack . Dieselbe Technik wird auch von Bootstrap und seinem Grid verwendet, obwohl Bootstrap anstelle von Margin Padding für seine Spalten verwendet.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
157
Roumelis George

Sie können transparente Ränder verwenden.

Ich habe über dieses Problem nachgedacht, als ich versuchte, ein Flex-Grid-Modell zu erstellen, das für ältere Browser auf ein Tables + Table-Cell-Modell zurückgreifen kann. Und Ränder für Kolonnenrinnen schienen mir die beste Wahl zu sein. Tabellenzellen haben keine 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 verarbeitet feste Größen nur dann, wenn Sie flex: none; für das gewünschte untergeordnete Element als festgelegt festlegen und daher nicht "flexi" sind. http://jsfiddle.net/GLpUp/4/ Aber alle Spalten zusammen mit flex:none; sind kein Flex-Modell mehr .. Hier ist etwas näher an einem Flex-Modell: http: // jsfiddle.net/GLpUp/5/

Sie können also normalerweise Ränder verwenden, wenn Sie bei älteren Browsern keinen Fallback für Tabellenzellen benötigen. http://jsfiddle.net/GLpUp/3/

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

74
hexalys

flexbox und css calc ()

Hallo, hier ist meine Arbeitslösung für alle Browser, die Flexbox unterstützen. Keine negativen Margen, keine Hacks, keine Workarounds, reines Css.

Fiddle Demo

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

67

Dies funktioniert in allen Fällen, auch wenn mehrere Zeilen oder eine beliebige Anzahl von Elementen vorhanden sind.

Wir verwenden display: grid; und seine Eigenschaften.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Die Kehrseite dieser Methode ist, dass in Mobile Opera Mini nicht unterstützt wird und in PC funktioniert dies erst nach IE10 .

Hinweis für vollständige Browser-Kompatibilität einschließlich IE11 verwenden Sie bitte Autoprefixer


ALTE ANTWORT

Betrachten Sie es nicht als eine alte Lösung, es ist immer noch eine der besten, wenn Sie nur eine einzelne Reihe von Elementen möchten und es mit allen Browsern funktioniert.

Diese Methode wird von CSS-Geschwisterkombination verwendet, so dass Sie sie auch auf viele andere Arten manipulieren können, aber wenn Ihre Kombination ist falsch, es kann auch Probleme verursachen.

.item+.item{
  margin-left: 5px;
}

Der folgende Code erledigt den Trick. Bei dieser Methode ist es nicht erforderlich, margin: 0 -5px; zum #box Wrapper.

Eine Arbeitsprobe für Sie:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
53
weBBer

Ich habe eine Lösung gefunden, die auf dem css preceded by-Selektor ~ basiert und inifinite Verschachtelung ermöglicht.

Siehe diesen Codestift für ein Funktionsbeispiel

Grundsätzlich erhält in einem Säulencontainer jedes Kind, dem ein anderes Kind vorangeht, einen oberen Rand. In jedem Zeilencontainer erhält jedes Kind, dem ein anderes vorangestellt ist, einen linken Rand.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}
<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

17
Simon Epskamp

In Anlehnung an die Antwort von sawa gibt es eine etwas verbesserte Version, mit der Sie einen festen Abstand zwischen den Elementen ohne umgebenden Rand festlegen können.

http://jsfiddle.net/chris00/s52wmgtq/49/

Ebenfalls enthalten ist die Safari-Version "-webkit-flex".

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>
14
chris

Wenn Sie den 10px-Raum zwischen den Elementen festlegen möchten, können Sie einfach .item {margin-right:10px;} für alle festlegen und ihn auf den letzten zurücksetzen. .item:last-child {margin-right:0;}

Sie können auch allgemeine Geschwister ~ oder next + Geschwister-Selektor verwenden, um den linken Rand für Elemente festzulegen, die nicht den ersten enthalten, .item ~ .item {margin-left:10px;} oder .item:not(:last-child) {margin-right: 10px;}

Flexbox ist so clever, dass das Gitter automatisch neu berechnet und gleichmäßig verteilt wird.

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Wenn Sie flex wrap zulassen möchten, lesen Sie das folgende Beispiel.

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

12
Stickers

Sie können& > * + *selector verwenden, um einen flex-gap (für eine einzelne Zeile) zu emulieren:

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Wenn Sie flex wrapping unterstützen möchten, können Sie ein Wrapper-Element verwenden:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

11
Do Async

Ich habe dies für umwickelte Spalten mit fester Breite verwendet. Der Schlüssel hier ist calc()

SCSS-Beispiel

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

Vollständige Codepen-Probe

9
Veiko Jääger

Ein flex-Container mit -x (negativ) margin und flex-Elementen mit x (positiv) margin oder padding führt beide zum gewünschten visuellen Ergebnis: Flex Elemente haben eine feste Lücke von 2x nur zwischeneinander.

Es scheint nur eine Frage der Präferenz zu sein, ob die Flex-Elemente mit einem Rand oder mit Polstern aufgefüllt werden. 

In diesem Beispiel werden die Flex-Elemente dynamisch skaliert, um die feste Lücke zu erhalten:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}
9
Tim

Schließlich fügen sie die Eigenschaft gap zu flexbox hinzu. Bis dahin können Sie stattdessen ein CSS-Grid verwenden, das bereits die gap -Eigenschaft hat, und nur eine einzige Zeile haben. Schöner als mit Margen umzugehen. 

6
o-t-w

Warum machst du es nicht so:

.item + .item {
    margin-left: 5px;
}

Dies verwendet den benachbarten Geschwister-Selektor , um allen .item-Elementen außer dem ersten einen margin-left zu geben. Dank flexbox ergeben sich sogar gleich breite Elemente. Dies kann natürlich auch mit vertikal positionierten Elementen und margin-top erfolgen.

4
tillsanders

Mit Flexbox in meiner Lösung habe ich die justify-content-Eigenschaft für das übergeordnete Element (Container) verwendet und die Ränder in der flex-basis-Eigenschaft der Elemente angegeben.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}
<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

4
iClusterDev

In solchen Fällen verwende ich häufig den Operator +

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

3
wutzebaer

Hier ist meine Lösung, für die keine Klassen für die untergeordneten Elemente festgelegt werden müssen:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

Verwendungszweck:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

Die gleiche Technik kann für normale Flex-Zeilen und -Spalten zusätzlich zu dem oben angegebenen Inline-Beispiel verwendet werden und kann um Klassen erweitert werden, deren Abstand nicht 4px ist.

3
MK10

Mit der Flexbox ist das Erstellen von Dachrinnen besonders beim Wickeln ein Problem.

Sie müssen negative Margen verwenden ( wie in der Frage dargestellt):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... oder ändern Sie den HTML-Code ( wie in einer anderen Antwort ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... oder etwas anderes.

In jedem Fall ist ein hässlicher Hack erforderlich, damit es funktioniert, da Flexbox keine "flex-gap" - Funktion bietet ( zumindest für jetzt ).

Das Thema Dachrinnen ist jedoch mit dem CSS-Rasterlayout einfach und problemlos.

Die Grid-Spezifikation stellt Eigenschaften bereit, die zwischen den Gitterelementen Platz schaffen, während der Abstand zwischen den Elementen und dem Container ignoriert wird. Diese Eigenschaften sind:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (die Abkürzung für beide Eigenschaften oben)

Vor kurzem wurde die Spezifikation an das CSS Box Alignment Module angepasst, das eine Reihe von Ausrichtungseigenschaften für alle Boxmodelle enthält. Die Eigenschaften sind jetzt also:

  • column-gap
  • row-gap
  • gap (Abkürzung)

Allerdings unterstützen nicht alle Grid-unterstützenden Browser die neueren Eigenschaften, daher verwende ich die Originalversionen in der folgenden Demo.

Wenn ein Abstand zwischen den Elementen und dem Container erforderlich ist, funktioniert padding im Container problemlos (siehe drittes Beispiel in der Demo unten).

Aus der Spezifikation:

10.1. Dachrinnen: der row-gap, column-gap und gap Eigenschaften

Die Eigenschaften row-gap und column-gap (und ihre Kurzform gap), Definieren Sie bei einer Angabe in einem Gittercontainer die Zwischenräume zwischen den Gittern Zeilen und Rasterspalten. Ihre Syntax ist in CSS Box Alignment 3 .__ definiert. §8 Lücken zwischen Boxen .

Diese Eigenschaften wirken sich so aus, als ob die betroffenen Gitterlinien ermittelte Dicke: Die Gitterspur zwischen zwei Gitternetzlinien ist der Raum zwischen den Rinnen, die sie darstellen.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}
<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Mehr Informationen:

3
Michael_B

Columnify - Eine Solo-Klasse für N Spalten

Flexbox und SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox und CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}
<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

Spielen Sie damit auf JSFiddle .

2
zurfyx

Verwenden Sie einfach .item + .item im Selektor, um den zweiten .item zu finden.

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

2
Andrew Luca

Hier ist ein Raster von Karten-UI-Elementen, deren Abstände mit einem flexiblen Feld ausgefüllt werden:

 enter image description here

Ich war frustriert, als ich die Karten manuell beabstandete, indem ich die Füllungen und Ränder mit iffy-Ergebnissen manipulierte. Hier sind die Kombinationen von CSS-Attributen, die ich als sehr effektiv empfunden habe:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}
<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

Hoffe, das hilft den Leuten, Gegenwart und Zukunft.

1
buildpax

Vorausgesetzt:

  • Sie möchten ein 4-Spalten-Rasterlayout mit Umbruch
  • Die Anzahl der Elemente ist nicht notwendigerweise ein Vielfaches von 4

Legen Sie einen linken Rand für jedes Element außer dem ersten, fünften, neunten Element usw. fest. und legen Sie eine feste Breite für jeden Artikel fest. Wenn der linke Rand 10 Pixel beträgt, hat jede Zeile einen Abstand von 30 Pixeln zwischen vier Elementen.

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Dies ist eine anständige Problemumgehung für Probleme mit der letzten Reihe der Flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

1
Salman A

Es gibt in der Tat eine nette, aufgeräumte, reine CSS-Methode, um dies zu tun (was man als "besser" betrachten kann).

Von allen hier veröffentlichten Antworten habe ich nur eine gefunden, die calc () erfolgreich (von Dariusz Sikorski) verwendet. Aber wenn mit: "aber es schlägt fehl, wenn es nur 2 Elemente in der letzten Zeile gibt" wurde keine Lösung erweitert.

Diese Lösung spricht die Frage des OP mit einer Alternative zu negativen Margen an und spricht das Problem an, das sich Dariusz stellt.

anmerkungen:

  • Dieses Beispiel zeigt nur ein 3-Spalten-Layout
  • Es verwendet calc(), damit der Browser die gewünschten Berechnungen ausführen kann --100%/3(obwohl 33,3333% genauso gut funktionieren sollten) und (1em/3)*2(obwohl .66em auch gut funktionieren sollte).
  • Es verwendet ::after, um die letzte Zeile aufzufüllen, wenn weniger Elemente als Spalten vorhanden sind

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}
<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Auch unter https://codepen.io/anon/pen/rqWagE

1
aequalsb

Am einfachsten finde ich das mit Prozentsätzen und einfach zulassen, dass sich der Spielraum an Ihre Breite anpasst

Dies bedeutet, dass Sie mit so etwas enden, wenn Sie Ihr Beispiel verwendet haben

#box {
   display: flex;
}

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

Bedeutet, dass Ihre Werte auf der Breite basieren, die möglicherweise nicht für jeden gut ist.

1
lukefrake

Ich bin früher auf das gleiche Problem gestoßen und bin dann auf die Antwort gestoßen. Ich hoffe, es wird anderen zum Nachschlagen helfen.

lange Antwort kurz, fügen Sie den untergeordneten Flex-Elementen einen Rahmen hinzu Dann können Sie die Ränder zwischen den Flex-Elementen beliebig festlegen. __ In dem Snippet verwende ich schwarz für Illustrationszwecke ' wenn du möchtest.

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

0
Tunasing

Der negative Margin-Trick des Box-Containers funktioniert einfach großartig. Hier ist ein weiteres Beispiel, das gut mit Ordnung, Verpackung und was nicht funktioniert.

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}
<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>

0
cghislai

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

0
Amo Wu

Dies funktioniert nicht in jedem Fall, aber wenn Sie über flexible untergeordnete Breiten (%) verfügen und die Anzahl der Elemente pro Zeile kennen, können Sie die Ränder der erforderlichen Elemente mit nth-child selector/s sehr genau festlegen.

Es hängt weitgehend davon ab, was Sie mit "besser" meinen. Auf diese Weise ist kein zusätzliches Wrapper-Markup für untergeordnete Elemente oder negative Elemente erforderlich. Beide Elemente haben jedoch ihren Platz.

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}
<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

0
jnmrobinson

Ich habe einen Hack gefunden, weil ich das wirklich selbst brauche.

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Hier ist auch ein Post Grid mit Nice Flex Grow Kategorien. Ich denke es würde dir gefallen. Siehe Codepen

0
Keviin Cosmos

Ich setze den Abstand bei Flexartikeln nur in der Richtung, die durch den Container festgelegt wird. Wenn ein Flex-Container so eingestellt ist, dass er von links nach rechts fließt (flex-direction:row), setze ich nur den right -Rand auf seine untergeordneten Elemente außer dem letzten:

.flex-lr{
    display:flex;
    flex-direction:row;
}

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

Dies scheint auf den ersten Blick zu funktionieren, aber warten Sie ab! Dies sollte nicht durchgeführt werden, wenn für justify-content ein anderer Wert als start oder end festgelegt ist, da alle anderen Werte den Speicherplatz bereits selbst verteilen.

Und was ist, wenn die Artikel verpackt werden? Dann sollten wir der rechten Seite der Querachse ebenfalls Platz hinzufügen. Aber woher weiß man, ob ein Container die Verpackung seiner Kinder zulässt? Und was ist mit wrap-reverse

All diese Überlegungen ließen mich denken, dass dies keine triviale Aufgabe ist und einen kleinen Schritt darüber hinaus erfordert.

Mein Ansatz basiert auf dem Aufbau einer kurzen Gruppe von Klassen, die als Wrapper für Flexbox fungieren. Das hat einige Vorteile:

  1. Es erlaubt, alle Herstellerpräfixe in einem einzigen Punkt zu "zentralisieren" und das zu vergessen.
  2. Es ermöglicht, Flexbox-Eigenschaften in einer einzigen Klasse zu gruppieren oder sogar einige der von Flexbox verwendeten Formulierungen umzubenennen, die manchmal nicht sehr intuitiv erscheinen (IMHO).
  3. Wenn ich diese Klassen verwende, kann ich andere Klassen basierend auf den Flex-Eigenschaftswerten schreiben, auf die sie sich verlassen. Z.B. Ich könnte den Abstand basierend auf der Fließrichtung, der Ausrichtung der Querachse, dem Umwickeln usw. einstellen.

Am Ende baute ich einen Flexbox-Designer, um mit all dem herumzuspielen, um mich selbst (und andere) zu verstehen, wie Flexbox funktioniert und um zu verstehen, wie wunderbar Flexbox ist.

http://algid.com/Flex-Designer

Im Folgenden finden Sie eine Zusammenfassung der von mir verwendeten Klassen und der Abstände (Rand) für eine Flussrichtung. Sie können die anderen ableiten oder in dem oben angegebenen Link finden. Herstellerpräfixe wurden hier aus Gründen der Übersichtlichkeit weggelassen.

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

Und jetzt das, was uns hierher gebracht hat: der Abstand zwischen den Objekten:

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

Schließlich würde das Markup so aussehen:

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

Ich rufe den Code laut auf.

0
Mario Vázquez