CSS-Eigenschaft flex-basis

❮ Vorige Nächste ❯

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>

Versuch es selber!

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.