Wie mache ich Flexbox-Artikel gleich groß?

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

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;

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;
}

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;
}

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;
}

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%',