Flex Basis-Eigenschaft in Flexbox

Flex Basis

Die flex-basisEigenschaft definiert die Größe flex-itementlang der Hauptachse des Flex-Containers. Die Hauptachse ist horizontal, wenn flex-directioneingestellt ist, rowund vertikal, wenn die flex-directionEigenschaft eingestellt ist column.

Syntax

flex-basis: auto | content |  | ;

Flex-Basis: Auto

flex-basis: autoSucht die Hauptgröße des Elements und definiert die Größe. Suchen Sie beispielsweise bei einem horizontalen Flex-Container autonach widthund heightob die Containerachse vertikal ist.

Wenn keine Größe angegeben ist, autowird auf zurückgegriffen content.

Flex-Basis: Inhalt

flex-basis: contentLöst die Größe basierend auf dem Inhalt des Elements auf, es sei denn widthoder heightwird durch normal festgelegt box-sizing.

In beiden Fällen, in denen flex-basisentweder autooder content, wenn die Hauptgröße angegeben ist, diese Größe Vorrang hat.

Flex-Basis:

Dies ist genauso spezifizierend widthoder height, aber nur flexibler. flex-basis: 20em;setzt die Anfangsgröße des Elements auf 20em. Die endgültige Größe basiert auf dem verfügbaren Speicherplatz ( flex-growmehrfach und flex-shrinkmehrfach).

Die Spezifikation schlägt die Verwendung von flexKurzschrift-Eigenschaften vor. Dies hilft beim Schreiben flex-basismit flex-growund flex-shrinkEigenschaften.

Beispiele

Hier sehen Sie Reihen einzelner Flex-Container und einzelner Flex-Elemente, die zeigen, wie flex-basissich die box-sizing.

Auswirkung der Flex-Basis auf die horizontale Achse

Wenn dies der Fall flex-directionist column, flex-basissteuert dasselbe die heightEigenschaft. Sie können es im folgenden Beispiel sehen:

Beispiel einer Flex-Basis-Höhensteuerung in einem vertikalen Container

Mehr Informationen:

Auf den folgenden Seiten können Sie zusätzliche Referenzen zur Flex-Basis-Eigenschaft finanzieren:

  • CSS-Spezifikationsstufe 1
  • Mozilla Developer Network-Seite auf Flex-Basis

Weitere Informationen zu Flexbox:

  • Tipps und Tricks zu CSS Flexbox
  • Flexbox - das ultimative Cheatsheet