Eigenschaft flex-basis

Die Eigenschaft flex-basis legt die Größe eines bestimmten Flex-Blocks fest, bevor die restlichen Flex-Eigenschaften auf ihn angewendet werden. Im Allgemeinen legt die Eigenschaft die Größe des Elements entlang der Hauptachse fest. Das bedeutet, dass wenn die Hauptachse horizontal ist - diese Eigenschaft die Breite der Elemente festlegt, und wenn sie vertikal ist - dann die Höhe.

Wird auf einen bestimmten Flex-Block angewendet.

Diese Eigenschaft ist ein Bestandteil der Kurzschreibweise flex.

Syntax

cssSelektor {
  flex-basis: beliebige CSS-Einheiten (und Prozente) | auto;
}

Standardwert: auto.

Beispiel

Nehmen wir an, die Hauptachse verläuft horizontal und flex-basis hat den Wert 50px. In diesem Fall beträgt die Breite der Elemente 50px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* Achse horizontal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* Elementgröße */
  border: 1px solid green;
}

Результат:

Beispiel

Lassen Sie uns nun die Achse umdrehen, ohne den Wert der Eigenschaft flex-basis zu ändern. In diesem Fall wird die Höhe der Elemente 50px betragen:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* Achse vertikal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Siehe auch