DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die flex-basis Eigenschaft ist eine Untereigenschaft des Flexible Box Layout Moduls. Sie gibt die anfängliche Größe des Flex-Elements an, bevor der verfügbare Platz gemäß den Flex-Faktoren verteilt wird. Wenn sie aus dem flex Kurzschreibweise weggelassen wird, ist ihr vorgegebener Wert die Länge null.
.element {
flex-basis: 100px;
}Ein flex-basis Wert, der auf auto gesetzt ist, passt die Größe des Elements entsprechend seiner Größen-Eigenschaft an (die selbst das Schlüsselwort auto sein kann, was das Element basierend auf seinem Inhalt skaliert).
Syntax
flex-basis: <number>Bitte beachten Sie, dass negative Längen, wie bei jeder Breite, ungültig sind.
Demo
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 11 | 12+ | 22+ | 22-28 1 29+ | 7-8 1 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 1 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Unterstützt mit Präfix
-webkit-
Für weitere Informationen, wie man Syntaxen mischt, um die beste Browserunterstützung zu erhalten, siehe „Using Flexbox“ und diesen Artikel von DevOpera.
Der Artikel sollte vielleicht aktualisiert werden, um zu sagen, dass die Spezifikation empfiehlt, die ‚flex‘ Kurzschreibweise anstelle der ‚flex-basis‘ Langschreibweise zu verwenden.
Flex-basis im Detail + ein Beispiel: https://codepen.io/slater101/full/OaZLWd
Codepen Demo zeigt nicht flex-basis
Es verwendet die
flexKurzschreibweise, der letzte Wert ist fürflex-basisund die Demo hat einen expliziten Wert in em.Kann mir jemand helfen, dieses Problem zu lösen?
http://codepen.io/anon/pen/LRPwZP
Was genau ist die Größe-Eigenschaft?
Hallo. Danke für den Artikel und diese Website im Allgemeinen. Darf ich fragen, ob dieser Beitrag noch nutzbar ist, da er etwas alt ist? Danke.
Ja, alles hier ist relevant. Sie könnten sich auch auf den vollständigen Flexbox-Leitfaden beziehen, um einen vollständigen Überblick über alle verfügbaren Flex-Eigenschaften mit Beispielen zu erhalten.
Es wird nicht klar gemacht, ob Prozentwerte erlaubt sind?
Setzt die flex-basis Eigenschaft wirklich die Breite des Elements? Hängt sie nicht von der flex-direction Eigenschaft ab?
Ich meine, für flex-direction: column; legt flex basis die Höhe des Elements fest und für flex-direction: row; legt sie die Breite des Elements fest.
„Wenn aus der flex Kurzschreibweise weggelassen, ist sein vorgegebener Wert die Länge null.“
Wenn ich das richtig verstehe, bezieht sich dies auf den Standardwert von
flex-basisals0. Wenn mein Verständnis korrekt ist, dann ist diese Information falsch.Der Standardwert von
flex-basisistautoHey Adrian! Du hast absolut Recht: Der Anfangswert von
flex-basisistauto. Aber, wie im Artikel richtig erwähnt, ergibt sich ein Anfangswert von0, wenn er nicht in derflexKurzschreibweise angegeben ist. Der Text, den du zitierst, stammt tatsächlich direkt aus dem neuesten Editor's Draft der Spezifikation.Der Artikel erklärt die flex-basis Eigenschaft nicht. Es gibt nur ein Beispiel, das nicht ausreicht. Bitte erklären Sie die Eigenschaft vollständig mit Details und weiteren Beispielen.
In der Zwischenzeit können Sie sich dies ansehen: https://css-tricks.de/understanding-flex-grow-flex-shrink-and-flex-basis/