Flexbox gibt den Elementen keine gleichmäßige Breite

Question

Ein Versuch, eine Flexbox-Navigation mit bis zu 5 Elementen und mindestens 3 Elementen zu erstellen, aber sie teilt die Breite nicht gleichmäßig zwischen allen Elementen auf.

Fiddle

Das Tutorial, dem ich folge, ist http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

    Pizza
    Hühnernudelsuppe
    Erdnussbutter
    Fisch

Answer 1

Es gibt einen wichtigen Teil, der im Artikel, zu dem du verlinkt hast, nicht erwähnt wird, und das ist flex-basis. Standardmäßig ist flex-basis auto.

Aus der Spezifikation:

Wenn der angegebene flex-basis auto ist, ist der verwendete Flex-Basiswert der Wert der Hauptgrößeneigenschaft des Flex-Elements. (Dies kann selbst das Schlüsselwort auto sein, das das Flex-Element basierend auf seinem Inhalt dimensioniert.)

Jedes Flex-Element hat einen flex-basis, der sozusagen seine Anfangsgröße ist. Danach wird der verbleibende freie Platz proportional (basierend auf flex-grow) auf die Elemente verteilt. Mit auto ist diese Basis die Größe des Inhalts (oder die definierte Größe mit width usw.). Dadurch erhalten Elemente mit größerem Text mehr Platz insgesamt in deinem Beispiel.

Wenn du möchtest, dass deine Elemente vollkommen gleich groß sind, kannst du flex-basis: 0 setzen. Damit wird der Flex-Basiswert auf 0 gesetzt, und dann wird der verbleibende Platz (der alle Plätze umfasst, da alle Basen 0 sind) proportional basierend auf flex-grow verteilt.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Dieses Diagramm aus der Spezifikation veranschaulicht den Punkt ziemlich gut.

Und hier ist ein funktionierendes Beispiel mit deinem Fiddle.

Answer 2

Wie in der Antwort von @James Montagne erklärt, wird flex-basis: 0 dafür sorgen, dass die Flexbox-Spalten gleichmäßig verteilt werden, was in diesem Fall funktioniert, da der Spalteninhalt umbrechen kann und die Breite nicht erzwingt. In Fällen jedoch, in denen die Breite des Spalteninhalts erzwungen wird (zum Beispiel mit Bildbreite oder white-space: nowrap), ist die Lösung, min-width: 0 zu setzen...

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

Answer 3

Um Elemente mit gleicher Breite unter Verwendung von Flex zu erstellen, sollten Sie für Ihr Kind (Flex-Elemente) folgende Einstellungen vornehmen:

flex-Basis: 25%;
flex-grow: 0;

Es wird allen Elementen in der Reihe eine Breite von 25% verleihen. Sie werden nicht wachsen und nacheinander fortlaufend angezeigt.

Answer 4

Lösung:

flex: 1;

ODER

.flex-child-items{
   flex-grow: 1;
} 

Erklärung:

Wenn Sie nur display: flex verwenden, werden alle Elemente horizontal ausgerichtet und die Breite wird die Summe der Breite der Kinder sein (abhängig vom Inhalt oder manchmal von der width Eigenschaft).

Zum Beispiel:

// Ein normales Flexbox

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

Nehmen wir nun an, Sie möchten den verfügbaren Platz gleichmäßig auf alle Elemente aufteilen. Fügen Sie hierzu allen Kindern des Flex-Containers flex-grow: 1 hinzu. (In diesem Beispiel A, B und C)

.A, .B, .C {
    flex-grow: 1;
}

Danach sieht es so aus:

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*Übrigens, wenn das obige Beispiel nicht zentriert aussieht, entschuldigen Sie bitte, aber der Code funktioniert. Probieren Sie es in Ihrem Projekt aus.

Answer 5

Um zu verstehen, warum das Festlegen der flex-grow-Eigenschaft die Elemente nicht gleichmäßig in einem Flex-Container verteilt, müssen wir in die Funktionsweise des Flex-Algorithmus eintauchen und verstehen, wie flex-grow funktioniert.

1. Standardverhalten von display:flex:

Wenn Sie einen Container auf display:flex setzen, wird er standardmäßig auf flex-direction:row gesetzt und seine Flex-Elemente haben Breiten basierend auf ihrem Inhalt. In diesem Szenario gilt: je größer der Inhalt eines Elements, desto breiter wird es. Das padding und flex-grow wurden aus Ihrem Code entfernt, um dieses Verhalten zu zeigen:

Nach dem Entfernen dieser Deklarationen aus .tabs ul li:{...}:

flex-grow: 1;
padding: 20px 20px 20px 70px;

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
/*   flex-grow: 1; */
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
/*   padding: 20px 20px 20px 70px; */
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

    Pizza
    Hühnersuppe
    Erdnussbutter
    Fisch

2. Die Rolle von flex-grow: Durch Anwenden von flex-grow auf ein Flex-Element wird das Element dazu angewiesen, sich auszudehnen, wenn innerhalb des Containers Platz vorhanden ist.

3. Gleichmäßige Verteilung mit flex-grow:1: Wenn wir allen Elementen flex-grow:1 zuweisen, wie in Ihrem Beispiel, werden sie den verbleibenden Platz proportional gleichmäßig teilen. Es ist jedoch wichtig zu beachten, dass sie anfangs nicht gleicher Breite sind. Der zusätzliche Platz wird zur ursprünglichen Breite jedes Elements hinzugefügt (die Inhaltsbreite).

So sieht es aus, wenn wir flex-grow:1 wieder einfügen:

Beachten Sie, dass der rechte Platz nach jedem Flex-Element gleich ist, aber die Breite der Elemente nicht gleich ist aufgrund unterschiedlicher Inhaltsgrößen

4. Lösung des Problems mit ungleicher Breite: Um eine wirklich gleichmäßige Verteilung zu erreichen, können Sie die width der Elemente auf 0 setzen, so dass der verfügbare Platz durch flex-grow genutzt werden kann, und hier ist, wie es aussieht:

Beachten Sie, dass das blaue Rechteck die Grenze aller Elemente darstellt

Jetzt haben wir allen verfügbaren Platz für die Verteilung durch flex-grow, und wir können sie gleichmäßig unter den Flex-Elementen aufteilen.

Alternativ können Sie die flex-basis-Eigenschaft verwenden, um eine gleichmäßige Verteilung sicherzustellen. Das Festlegen von flex-basis:0 führt zu einem ähnlichen Ergebnis. Eine andere Möglichkeit ist die Verwendung der Kurzschreibweise flex, bei der flex:1 gleichbedeutend mit flex-grow:1, flex-shrink:1 und flex-basis:0 ist.

und beide Optionen erzielen dasselbe Ergebnis:

und hier ist das Ergebnis, nachdem wir das padding wieder hinzugefügt haben:

Es ist erwähnenswert, dass der Flex-Algorithmus eine Möglichkeit hat, die anfängliche Breite (im Fall von flex-direction:row) und Höhe (im Fall von flex-direction:column) mithilfe von flex-basis zu bestimmen, die die Breiten- oder Höheneigenschaft überschreiben kann, falls sie existiert. Um potenzielle Fehler zu vermeiden, wird empfohlen, sie oder die Kurzschreibweise flex-Eigenschaft zu verwenden, um ein konsistentes und vorhersehbares Verhalten sicherzustellen.

Zusammenfassend können Sie zur gleichmäßigen Verteilung des Platzes unter den Flex-Elementen flex-basis:0 oder flex:1 mit Standardwerten verwenden, wobei Sie die Nuancen des Flex-Algorithmus im Auge behalten müssen. Mit diesem Ansatz werden die Elemente in einem Flex-Container gleichmäßig und konsistent aufgeteilt, unabhängig von ihren anfänglichen inhaltsbasierten Breiten.