CSS-Flexbox-Elemente

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Untergeordnete Elemente (Elemente)

Die direkten untergeordneten Elemente eines Flex-Containers werden automatisch zu flexiblen (Flex-)Elementen.

1

2

3

4

Das obige Element stellt vier blaue Flex-Elemente in einem grauen Flex-Container dar.

Beispiel

<div class="flex-container">
  <div>1</div>
  
  <div>2</div>
  <div>3</div> 
  
  <div>4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

Die Flex-Item-Eigenschaften sind:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Die Auftragseigenschaft

Die Eigenschaft order gibt die Reihenfolge der Flex-Elemente an.

1

2

3

4

Das erste Flex-Element im Code muss nicht als erstes Element im Layout erscheinen.

Der Bestellwert muss eine Zahl sein, der Standardwert ist 0.

Beispiel

Die Eigenschaft order kann die Reihenfolge der Flex-Elemente ändern:

<div class="flex-container">
  <div style="order: 3">1</div>
  
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  
  <div style="order: 1">4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

</body>
</html>

Die Flex-Grow-Eigenschaft

Die Eigenschaft flex-grow gibt an, um wie viel ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen wächst.

1

2

3

Der Wert muss eine Zahl sein, der Standardwert ist 0.

Beispiel

Sorgen Sie dafür, dass das dritte Flex-Element achtmal schneller wächst als die anderen Flex-Elemente:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 
  8">3</div> 
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

Die Flex-Shrink-Eigenschaft

Die Eigenschaft flex-shrink gibt an, um wie viel ein Flex-Element im Vergleich zu den übrigen Flex-Elementen schrumpft.

1

2

3

4

5

6

7

8

9

10

Der Wert muss eine Zahl sein, der Standardwert ist 1.

Beispiel

Lassen Sie das dritte Flex-Element nicht so stark schrumpfen wie die anderen Flex-Elemente:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 
  0">3</div>
    <div>4</div>
  <div>5</div>
  <div>6</div>
  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  
  <div>10</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

Die Flex-Basis-Eigenschaft

Die Eigenschaft flex-basis gibt die anfängliche Länge eines Flex-Elements an.

1

2

3

4

Beispiel

Legen Sie die Anfangslänge des dritten Flex-Elements auf 200 Pixel fest:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
    <div>4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Die Flex-Eigenschaft

Die Eigenschaft flex ist eine Abkürzungseigenschaft für flex-grow-, flex-shrink- und flex-basis-Eigenschaften.

Beispiel

Machen Sie das dritte Flex-Element nicht erweiterbar (0), nicht schrumpfbar (0) und mit einem Anfangslänge von 200 Pixeln:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 
  0 0 200px">3</div>
    <div>4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Die align-self-Eigenschaft

Die Eigenschaft align-self gibt die Ausrichtung für das ausgewählte Element innerhalb des flexiblen Containers an.

Die Eigenschaft align-self überschreibt die Standardausrichtung, die durch die Eigenschaft align-items des Containers festgelegt wird.

1

2

3

4

In diesen Beispielen verwenden wir einen 200 Pixel hohen Container, um den besser zu veranschaulichen align-self-Eigenschaft:

Beispiel

Richten Sie den dritten Flex-Artikel in der Mitte des Containers aus:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: 
  center">3</div>
    <div>4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Beispiel

Richten Sie das zweite flexible Element oben am Behälter und das dritte flexible Element an der aus Boden des Behälters:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: 
  flex-start">2</div>
    <div style="align-self: 
  flex-end">3</div>
    <div>4</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Die CSS-Flexbox-Elementeigenschaften

In der folgenden Tabelle sind alle Eigenschaften von CSS-Flexbox-Elementen aufgeführt:

align-self

Gibt die Ausrichtung für ein Flex-Element an (überschreibt die align-items-Eigenschaft des Flex-Containers)

flex

Eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis Eigenschaften

flex-basis

Gibt die anfängliche Länge eines Flex-Elements an

flex-grow

Gibt an, um wie viel ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen im selben Container wächst

flex-shrink

Gibt an, wie stark ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen im selben Container schrumpft

order

Gibt die Reihenfolge der Flex-Elemente innerhalb desselben Containers an