webentwicklung-frage-antwort-db.com.de

Pseudo-Elemente, die Justify-Content brechen: Zwischenraum im Flexbox-Layout

Ich habe drei Divs in einem übergeordneten Div, die folgendermaßen verteilt sind:

display: flex;
justify-content: space-between;

Das übergeordnete div hat jedoch einen :after, wodurch die drei divs nicht zum Rand des übergeordneten div gehen. Gibt es eine Möglichkeit, dass flexbox den :before und :after ignoriert?

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

13
Landon Call

Kurze Antwort

In CSS gibt es derzeit keine 100% zuverlässige Möglichkeit, um zu verhindern, dass Pseudoelemente die justify-content: space-between-Berechnung beeinflussen.

Erläuterung

::before- und ::after-Pseudoelemente in einem Flex-Container werden zu Flex-Elementen.

Aus der Spezifikation:

4. Flex-Artikel

Jedes In-Flow-Kind eines Flex-Containers wird zu einem Flex-Element.

Mit anderen Worten, jedes Kind eines flexiblen Behälters, das sich im normalen Fluss (d. H. Nicht absolut positioniert) befindet, wird als flexibler Gegenstand betrachtet.

Die meisten Browser, wenn nicht alle, interpretieren das so, dass sie Pseudoelemente enthalten. Der ::before-Pseudo ist der erste Flex-Artikel. Der ::after-Eintrag ist der letzte.

Hier eine weitere Bestätigung für dieses Rendering-Verhalten aus der Firefox-Dokumentation:

Pseudo-Elemente im Fluss ::after und ::before sind jetzt flex Artikel ( Fehler 867454 ).

Eine mögliche Lösung für Ihr Problem besteht darin, die Pseudoelemente mit absoluter Positionierung aus dem normalen Fluss zu entfernen. Diese Methode funktioniert jedoch möglicherweise nicht in allen Browsern:

Sehen Sie sich meine Antwort hier an, um zu sehen, wie Pseudoelemente justify-content durcheinander gebracht werden

15
Michael_B

Wenn dies eine vererbte Eigenschaft ist, überschreiben Sie sie einfach

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 100px;
}

/* definitions from a framework */
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

/* definitions override */
.container.flexcontainer:before, 
.container.flexcontainer:after {
   display: none;  
}
<div class="container flexcontainer">
  <div></div>
  <div></div>
  <div></div>
</div>

4
vals

Verschachtelte ein weiteres div innerhalb des übergeordneten div und gab den gesamten Flex-Code an, damit die Pseudo-Elemente ihn nicht beeinflussen.

1
Landon Call

Wenn Sie dies tun müssen, können Sie das automatische Randverhalten für Flex-Elemente nutzen. Sie müssten auch den linken Rand des ersten Flexkindes und den rechten Rand des letzten Flexkindes auf Null setzen. Siehe den Codepen unten.

Flexbox & automatische Ränder: https://www.w3.org/TR/css-flexbox-1/#auto-margins

Codepen Demo: http://codepen.io/anderskleve/pen/EWvxqm

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;

  div {
    background: red;
    height: 245px;
    width: 300px;
    margin: 0 auto;
  }

  div:first-child {
    margin-left: 0;
  }

  div:last-child {
    margin-right: 0;
  }

  &:before {
    content:'';
    display: table;
  }

  &:after {
    clear: both;
    content: '';
    display: table;
  }
}
0
anderskleve