Wie mache ich Flexbox-Artikel gleich groß?

186

Ich möchte eine Flexbox verwenden, die einige Elemente enthält, die alle gleich breit sind. Mir ist aufgefallen, dass die Flexbox den Raum gleichmäßig verteilt und nicht den Raum selbst.

Beispielsweise:

.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 Gegenstand ist viel größer als der zweite. Wenn ich 3 Elemente, 4 Elemente oder n Elemente habe, möchte ich, dass sie alle in derselben Zeile mit dem gleichen Platz pro Element angezeigt werden.

Irgendwelche Ideen?

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

Chet
quelle

Antworten:

287

Stellen Sie sie so ein, dass sie flex-basissind 0(damit alle Elemente den gleichen Ausgangspunkt haben), und lassen Sie sie wachsen:

flex: 1 1 0px

Ihre IDE oder Ihr Linter könnten dies erwähnen the unit of measure 'px' is redundant. Wenn Sie es weglassen (wie flex: 1 1 0:), wird es vom IE nicht korrekt gerendert. Das pxist also erforderlich, um Internet Explorer zu unterstützen, wie in den Kommentaren von @fabb erwähnt;

Adam
quelle
65
Es ist zu beachten , dass die flexEigenschaft ist eine zusammenfassende Eigenschaft für die flex-grow, flex-shrinkund flex-basisEigenschaften. Es wird empfohlen, die Kurzform über den einzelnen Eigenschaften zu verwenden, da die Kurzschrift alle nicht angegebenen Komponenten korrekt zurücksetzt, um den allgemeinen Verwendungszwecken gerecht zu werden. Der Anfangswert ist 0 1 auto.
j08691
3
Beachten Sie, dass IE11 einheitlose Flex-Basiswerte ignoriert: github.com/philipwalton/flexbugs#flexbug-4
fabb
9
Ich musste hinzufügen min-width: 0, um untergeordnete Elemente mit überlaufendem Text zu verwenden. Siehe css-tricks.com/flexbox-truncated-text
Iwazaru
77

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

Beispiel aktualisiert

.header {
  display: flex;
}

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

Für das, was es wert ist, können Sie auch flex: 1für die gleichen Ergebnisse verwenden.

Die Abkürzung von flex: 1ist die gleiche wie flex: 1 1 0:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}
Josh Crozier
quelle
1
Das ist nicht richtig. Der Standard-Flex-Wert ist flex: 0 1 auto. Was bedeutet, dass die Einstellung flex: 1dazu führt flex: 1 1 auto. Dies wird nicht funktionieren. Die richtige Antwort ist flex: 1 1 0wie oben von Adam
r.sendecky
17
@ r.sendecky Nein, du bist derjenige, der falsch ist. Wie ich in meiner Antwort festgestellt habe, ist die Abkürzung der flex: 1Ergebnisse flex: 1 1 0 nicht so, flex: 1 1 auto wie Sie es behaupten. Werfen Sie einen Blick auf die offizielle W3-Spezifikation im Abschnitt "Flex-Kurzschrift" : Wenn flex-basis"in der Flex-Kurzschrift weggelassen, ist der angegebene Wert 0", nicht auto. Danke für die zufällige Abwertung.
Josh Crozier
2
@ r.sendecky - Schauen Sie sich auch dieses Beispiel an, das ich erstellt habe, um die Variationen zu visualisieren.
Josh Crozier
1
Kumpel, ich stimme nicht zufällig ab. Ich teste bevor ich schreibe. Und ich habe es getestet. Ihre Antwort funktioniert nicht - so einfach ist das. Ich hatte vor kurzem genau das gleiche Problem mit flex: 1und flex-direction: column. Die Kindergröße war nicht dieselbe, wenn andere Elemente in Kindern platziert wurden. Das einzige, was das Problem behoben hat, war die Einstellung flex: 1 1 0. Es steht noch heute mit Chrom 55.0.2883.87
r.sendecky
4
@JoshCrozier hat bestätigt, dass flex: 1das gleiche Verhalten wie flex: 1 1 0und flex: 0 1 autodas andere Verhalten hat.
Ivan Durst
66

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

.item {
  flex: 1 1 0;
  width: 0;
}
Jason Song
quelle
5
Dies scheint notwendig zu sein, wenn der Inhalt dazu führt, .itemdass es breiter wird als .itemes natürlich wäre.
Bungle
1
Ich denke du meinst flex: 1 1 0;, stattflex-grow: 1 1 0;
Hühnersuppe
3
fyi, Link ist unterbrochen
Bobby Jack
Das Setzen von flex-basisto 0dient demselben Zweck wie das Setzen von widthto 0.
Stephen
In meinem Anwendungsfall habe ich Diagramme verpackt, die sich dynamisch an die Größe und Breite ihrer Eltern anpassen. 0 war erforderlich, damit sie funktionieren. Ich bin nicht sicher, wie sie die richtige Breite bestimmt haben, aber die Flex-Basis hat auf Chrom 72 (veröffentlicht im Januar 2019) sicherlich nicht funktioniert.
Andy Groff
12

Die akzeptierte Antwort von Adam ( flex: 1 1 0) funktioniert perfekt für Flexbox-Container, deren Breite entweder fest ist oder von einem Vorfahren bestimmt wird. Situationen, in denen die Kinder in den Container passen sollen.

Möglicherweise möchten Sie jedoch, dass der Container zu den Kindern passt, wobei die Kinder gleich groß sind, basierend auf dem größten Kind. Sie können einen Flexbox-Container an folgende Elemente anpassen:

  • Einstellung position: absoluteund nicht Einstellung widthoder right, oder
  • Legen Sie es in eine Hülle mit display: inline-block

Bei solchen Flexbox-Containern funktioniert die akzeptierte Antwort NICHT , die Kinder sind nicht gleich groß. Ich gehe davon aus, dass dies eine Einschränkung der Flexbox ist, da sie sich in Chrome, Firefox und Safari gleich verhält.

Die Lösung besteht darin, ein Raster anstelle einer Flexbox zu verwenden.

Demo: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}
Brett Donald
quelle
0

Ich bin kein Experte für Flex, aber ich bin dorthin gekommen, indem ich die Basis für die beiden Dinge, mit denen ich mich befasst habe, auf 50% gesetzt habe. Wachsen Sie auf 1 und schrumpfen Sie auf 0.

Inline-Styling: flex: '1 0 50%',

Steve
quelle