CSS-Eigenschaft flex-basis

Die Eigenschaft flex-basis definiert die anfängliche Hauptgröße des flexiblen Elements. Wenn die Eigenschaft flex-basis nicht berücksichtigt wird, wird ihr Wert auf 0% gesetzt.

Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex-basis keine Wirkung.

Anfangswert auto
Gilt für Flex-Items, einschließlich In-Flow-Pseudo-Elemente
Geerbt Nein
Animierbar Ja, Items sind animierbar.
Version CSS3
DOM Syntax object.style.flexBasis = "100px";

Syntax

flex-basis: number | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 300px;
      height: 80px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 0; /* Safari 6.1+ */
      -webkit-flex-shrink: 0; /* Safari 6.1+ */
      -webkit-flex-basis: 50px; /* Safari 6.1+ */
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-basis: 150px; /* Safari 6.1+ */
      flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für flex-basis</h2>
    <div class="box">
      <div style="background-color: #eee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #ccc;">40px</div>
      <div style="background-color: #666;">40px</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
number Gibt die Länge des Elements durch "auto", "inherit" oder eine Zahl gefolgt von "%", "px", "em" usw an.
auto Dieser Wert ist der Standardwert dieser Eigenschaft. Die Länge ist gleich der Länge des flexiblen Elements. Wenn es keine spezifizierte Einzellänge gibt, erfolgt diese entsprechend ihrem Inhalt.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Übe dein Wissen

Was die Eigenschaft CSS flex-basis kontrolliert?
Finden Sie das nützlich?