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?
flex
Eigenschaft ist eine zusammenfassende Eigenschaft für dieflex-grow
,flex-shrink
undflex-basis
Eigenschaften. 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 ist0 1 auto
.min-width: 0
, um untergeordnete Elemente mit überlaufendem Text zu verwenden. Siehe css-tricks.com/flexbox-truncated-textSie können hinzufügen
flex-basis: 100%
, um dies zu erreichen.Beispiel aktualisiert
Für das, was es wert ist, können Sie auch
flex: 1
für die gleichen Ergebnisse verwenden.Die Abkürzung von
flex: 1
ist die gleiche wieflex: 1 1 0
:quelle
flex: 0 1 auto
. Was bedeutet, dass die Einstellungflex: 1
dazu führtflex: 1 1 auto
. Dies wird nicht funktionieren. Die richtige Antwort istflex: 1 1 0
wie oben von Adamflex: 1
Ergebnisseflex: 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" : Wennflex-basis
"in der Flex-Kurzschrift weggelassen, ist der angegebene Wert0
", nichtauto
. Danke für die zufällige Abwertung.flex: 1
undflex-direction: column
. Die Kindergröße war nicht dieselbe, wenn andere Elemente in Kindern platziert wurden. Das einzige, was das Problem behoben hat, war die Einstellungflex: 1 1 0
. Es steht noch heute mit Chrom 55.0.2883.87flex: 1
das gleiche Verhalten wieflex: 1 1 0
undflex: 0 1 auto
das andere Verhalten hat.Sie müssen hinzufügen
width: 0
, um die Spalten gleich zu machen, wenn der Inhalt der Elemente größer wird.quelle
.item
dass es breiter wird als.item
es natürlich wäre.flex: 1 1 0;
, stattflex-grow: 1 1 0;
flex-basis
to0
dient demselben Zweck wie das Setzen vonwidth
to0
.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:
position: absolute
und nicht Einstellungwidth
oderright
, oderdisplay: 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
quelle
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%',
quelle