CSS-Eigenschaft flex

Probieren Sie es aus

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change me</div>
  <div>flex: 1</div>
  <div>flex: 1</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• flex-grow
• flex-shrink
• flex-basis

Syntax

/* Keyword values */
flex: none; /* 0 0 auto */

/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */

/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px; /* 1 1 30px */

/* Two values: flex-grow | flex-shrink */
flex: 2 2; /* 2 2 0% */

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;

Die Eigenschaft flex kann mit einem, zwei oder drei Werten angegeben werden.

• Syntax mit einem Wert: Der Wert muss einer der folgenden sein:

  • ein gültiger Wert für flex-grow: Dann wird die Kurzform zu flex: <flex-grow> 1 0% erweitert.
  • ein gültiger Wert für flex-basis: Dann wird die Kurzform zu flex: 1 1 <flex-basis> erweitert.
  • das Schlüsselwort none oder eines der globalen Schlüsselwörter.

• Syntax mit zwei Werten:

  • Der erste Wert muss ein gültiger Wert für flex-grow sein.

  • Der zweite Wert muss einer der folgenden sein:

    • ein gültiger Wert für flex-shrink: Dann wird die Kurzform zu flex: <flex-grow> <flex-shrink> 0% erweitert.
    • ein gültiger Wert für flex-basis: Dann wird die Kurzform zu flex: <flex-grow> 1 <flex-basis> erweitert.

• Syntax mit drei Werten: Die Werte müssen in der folgenden Reihenfolge angegeben werden:

  1. ein gültiger Wert für flex-grow.
  2. ein gültiger Wert für flex-shrink.
  3. ein gültiger Wert für flex-basis.

Werte

<'flex-grow'>

Definiert flex-grow des Flex-Elements. Negative Werte werden als ungültig betrachtet. Wenn der Wert weggelassen wird, ist der Standardwert 1. (Der Anfangswert ist 0.)

<'flex-shrink'>

Definiert flex-shrink des Flex-Elements. Negative Werte werden als ungültig betrachtet. Wenn der Wert weggelassen wird, ist der Standardwert 1. (Der Anfangswert ist 1.)

<'flex-basis'>

Definiert flex-basis des Flex-Elements. Wenn der Wert weggelassen wird, ist der Standardwert 0%. Der Anfangswert ist auto.

none

Die Größe des Elements wird anhand seiner Eigenschaften width und height bestimmt. Es ist vollständig unflexibel: Es schrumpft oder wächst weder im Verhältnis zum Flex-Container. Dies entspricht dem Setzen von flex: 0 0 auto.

Häufig gewünschte Flexbox-Effekte können mit den folgenden flex-Werten erzielt werden:

• initial: Das Flex-Element wächst nicht, kann aber schrumpfen. Dieser Standardwert wird zu flex: 0 1 auto erweitert. Die Größe des Elements wird abhängig von flex-direction anhand seiner Eigenschaften width oder