W3docs
de
Anmelden

CSS flex-basis Eigenschaft

Die CSS-Eigenschaft flex-basis legt die anfängliche Hauptgröße eines Flex-Elements fest. Ohne Angabe beträgt ihr Standardwert auto.

Die Eigenschaft flex-basis legt die anfängliche Hauptgröße eines Flex-Elements fest — die Größe, die es erhält, bevor freier Platz durch flex-grow verteilt oder durch flex-shrink reduziert wird. Wenn diese Eigenschaft nicht angegeben wird, lautet ihr Ausgangswert auto.

Die Eigenschaft flex-basis gehört zu den CSS3-Eigenschaften und wirkt sich nur auf die Kindelemente eines Flex-Containers aus (ein Element mit display: flex oder display: inline-flex). Wenn das Elternelement kein Flex-Container ist, hat flex-basis keine Wirkung.

Warum flex-basis verwenden?

In einem Flexbox-Layout wird die Größe eines Elements in zwei Schritten berechnet:

  1. Der Browser liest den flex-basis-Wert des Elements, um eine Ausgangsgröße entlang der Hauptachse festzulegen.
  2. Anschließend vergrößert oder verkleinert er jedes Element ausgehend von dieser Ausgangsgröße, um den Container zu füllen (oder hineinzupassen), gemäß flex-grow und flex-shrink.

Verwenden Sie flex-basis, wenn Sie die ideale Größe eines Elements festlegen, aber trotzdem flexibel bleiben möchten. Zum Beispiel bedeutet flex-basis: 200px „Strebe 200px an und wachse/schrumpfe von dort", während width: 200px eine feste Größe ist, die Flexbox weniger bereit ist zu überschreiben.

flex-basis vs. width

Wenn flex-basis auf eine Länge oder einen Prozentwert gesetzt wird, hat es Vorrang vor width (oder height, wenn flex-direction auf column steht) bei der Bestimmung der anfänglichen Hauptgröße des Elements. Der wesentliche Unterschied: flex-basis gilt immer entlang der Hauptachse und folgt daher flex-direction. Bei flex-direction: row steuert es die Breite; bei flex-direction: column steuert es die Höhe. Ein einfaches width steuert immer die horizontale Größe, unabhängig von der Richtung.

Bei flex-basis: auto fällt das Element auf seinen width-/height-Wert zurück (oder auf die Inhaltsgröße, wenn diese nicht gesetzt sind).

Hinweis: Die Kurzschreibweise flex setzt flex-basis zusammen mit flex-grow und flex-shrink. Wenn Sie flex verwenden, hat dies Vorrang vor einer eigenständigen flex-basis-Deklaration — setzen Sie flex-basis daher nach flex, oder verwenden Sie direkt die Kurzschreibweise, um Überraschungen zu vermeiden.

Ausgangswertauto
Gilt fürFlex-Elemente, einschließlich Inline-Pseudo-Elemente.
VererbbarNein.
AnimierbarJa. Elemente sind animierbar.
VersionCSS3
DOM-Syntaxobject.style.flexBasis = "100px";

Syntax

Syntax der CSS-Eigenschaft flex-basis

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Grundlegendes Beispiel

Beispiel der CSS-Eigenschaft flex-basis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS flex-basis Eigenschaft

Beispiel mit allen Werten

Beispiel der flex-basis-Eigenschaft mit allen Werten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Beispiel mit Pixelwerten

Beispiel der flex-basis-Eigenschaft mit Angaben in Pixeln:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
length | percentageEine absolute Länge (px, em, rem) oder ein Prozentwert der Hauptgröße des Flex-Containers. Negative Werte sind ungültig.Ausprobieren »
autoDer Standardwert. Das Element verwendet seine eigene width/height (oder die Inhaltsgröße, wenn diese nicht gesetzt sind) als Basis.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert (auto) zurück.Ausprobieren »
inheritErbt den Wert vom Elternelement.
min-contentBemisst das Element auf seine kleinstmögliche Inhaltsbreite (das längste nicht trennbare Wort oder Element).Ausprobieren »
max-contentBemisst das Element auf seine maximale Inhaltsbreite ohne Zeilenumbruch.Ausprobieren »
fit-contentBegrenzt die Größe zwischen min-content und max-content, ähnlich der Funktion fit-content().Ausprobieren »
contentBemisst das Element anhand seines Inhalts und ignoriert dabei festgelegte width/height-Werte. Begrenzte Browserunterstützung.Ausprobieren »

Häufige Fallstricke

  • flex-basis hat außerhalb eines Flex-Containers keine Wirkung. Das Elternelement muss display: flex oder display: inline-flex haben.
  • Ein flex-basis-Wert von 0 (oder 0%) kombiniert mit flex-grow: 1 verteilt den Platz proportional nur nach dem Wachstumsfaktor, ohne Berücksichtigung der Inhaltsgröße — so funktionieren viele „gleiche Spalten"-Layouts.
  • Prozentwerte werden relativ zur Hauptgröße des Containers aufgelöst, nicht relativ zum viewport. Wenn der Container auf der Hauptachse keine definierte Größe hat, verhält sich ein prozentuales flex-basis möglicherweise wie auto.
  • Die Kurzschreibweise flex überschreibt flex-basis. Das Schreiben von flex: 1 setzt die Basis auf 0% zurück, was eine frühere flex-basis-Deklaration überschreiben kann.

Verwandte Eigenschaften

  • flex — die Kurzschreibweise für flex-grow, flex-shrink und flex-basis.
  • flex-grow — wie stark ein Element über seine Basis hinaus wächst.
  • flex-shrink — wie stark ein Element unter seine Basis schrumpft.
  • Der ultimative Leitfaden zu Flexbox — das vollständige Flexbox-Modell an einem Ort.

Übung

Übung
Was bewirkt die Eigenschaft 'flex-basis' in CSS?
Was bewirkt die Eigenschaft 'flex-basis' in CSS?
Was this page helpful?