Wie macht man Flexbox Elemente die gleiche Größe?

Ich möchte Flexbox verwenden, die eine gewisse Anzahl von Elementen, die alle die gleiche Breite sind hat. Ich habe bemerkt, dass flexbox verteilt den Raum um gleichmäßig, anstatt den Raum selbst.

Zum Beispiel:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}
<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

Der erste Eintrag ist viel größer als der zweite. Wenn ich 3, 4 oder n Einträge habe, möchte ich, dass sie alle in der gleichen Zeile mit gleich viel Platz pro Eintrag erscheinen.

Hat jemand eine Idee?

http://codepen.io/anon/pen/gbJBqM

Josh Crozier
Bearbeitete Frage 7. April 2015 в 11:50
Programmierung
css flexbox
7. April 2015 в 11:33
noch keine Aufrufe
Lösung

Stellen Sie sie so ein, dass ihre "flexible Basis" "0" ist (so dass alle Elemente den gleichen Ausgangspunkt haben), und lassen Sie sie wachsen:

flex: 1 1 0px

Ihre IDE oder Ihr Linter könnte erwähnen, dass "die Maßeinheit 'px' überflüssig ist". Wenn Sie sie weglassen (z.B.: flex: 1 1 0), wird der Internet Explorer sie nicht korrekt darstellen. Das "px" ist also erforderlich, um den Internet Explorer zu unterstützen, wie in den Kommentaren von @fabb erwähnt;

s.meijer
Bearbeitete Antwort 12. September 2019 в 10:15
Kommentare (3)

Sie könnten `flex-basis: 100%" hinzufügen, um dies zu erreichen.

Aktualisiertes Beispiel

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

Sie könnten auch flex: 1 verwenden, um das gleiche Ergebnis zu erzielen.

Die Kurzform von "flex: 1" ist die gleiche wie "flex: 1 1 0", was gleichbedeutend ist mit:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}
Håvard Geithus
Bearbeitete Antwort 22. Juni 2018 в 2:18
Kommentare (5)

Sie müssen width: 0 hinzufügen, um die Spalten gleich zu machen, wenn der Inhalt der Elemente sie größer werden lässt.

.item {
  flex: 1 1 0;
  width: 0;
}

Hier ist der Link, der mir geholfen hat, mein Problem zu lösen: Immer gleiche Flexbox-Spalten

Gio
Bearbeitete Antwort 3. Dezember 2018 в 6:22
Kommentare (7)