Lernziel: Flexibler Layoutkoffer
- Erfahren Sie mehr über flexibles Layout
- Nutzen Sie ein flexibles Layout
- Imitationsfall
1. Flexibles Layout (was ist flexibles Layout)
-
Flexible Box
Flexible Box besteht aus einem flexiblen Container (Flex-Container) und einem flexiblen Unterelement (Flex-Artikel).
-
Flexibler Container: Das übergeordnete Element des flexiblen Layouts muss hinzugefügt werden.
-
Flexibles untergeordnetes Element: ein untergeordnetes Element in einem flexiblen Layout-Container, auch Element genannt;
- Hauptachse: Im flexiblen Layout verwenden wir die durch das Attribut angegebene horizontale oder vertikale Richtung als Hauptachse [X/Y-Achse];
- Querachse: Eine andere Achse senkrecht zur Querachse (kann als vertikale Linie der Hauptachse verstanden werden)
Beispiel für ein flexibles Layout
<body>
<style>
.box {
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
Fügen Sie dem übergeordneten Element ein flexibles Layout hinzu
Tastencode: Anzeige: Flex;
<body>
<style>
.box {
display: flex;
/*将父元素改为弹性容器 flex*/
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
Operationsergebnis
2. Eigenschaften des flexiblen Layouts
1. Eigenschaften, die auf den übergeordneten Container wirken
Dieses Formular ist sehr wichtig und muss nicht auswendig gelernt werden, aber Sie müssen es unbedingt genauer lesen! Schauen Sie mehr! Schauen Sie mehr!
| Wert | beschreiben |
|---|---|
| Flex-Richtung | Geben Sie die Anordnung der untergeordneten Elemente im flexiblen Container an |
| Flexfolie | Legen Sie fest, ob die untergeordneten Elemente der flexiblen Box umbrochen werden sollen, wenn sie den übergeordneten Container überschreiten. |
| Flex-Flow | Abkürzung für Flex-Direction und Flex-Wrap |
| Rechtfertigungsinhalt | Legen Sie die Ausrichtung der Flexbox-Elemente in Richtung der Hauptachse (horizontale Achse) fest |
| align-items | Stellen Sie das Flexbox-Element auf die Seitenachse ein (Ausrichtung in Richtung der vertikalen Achse). |
| Inhalt ausrichten | Ändern Sie das Verhalten des Flex-Wrap-Attributs, ähnlich wie bei align-items, aber statt die Elementausrichtung festzulegen , legen Sie die Zeilenausrichtung fest |
1-1. Flex- Direction -Attribut
Das Attribut „flex-**direction“ wird verwendet, um die Anordnung der Unterelemente im flexiblen Container anzugeben, der die Richtung der Hauptachse bestimmt.
| Wert | beschreiben |
|---|---|
| Zeile (Standard) | Die Hauptachse ist horizontal und der Startpunkt liegt am linken Ende |
| Reihenrückwärts | Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende |
| Spalte | Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand |
| spaltenumgekehrt | Die Hauptachse verläuft vertikal und der Startpunkt liegt am unteren Rand |
1-2. Flex-Wrap-Attribut
Die Eigenschaft „flex-wrap“ gibt an, ob der Flex-Container einreihig oder mehrreihig ist, und die Richtung der horizontalen Achse (X-Achse) bestimmt die Richtung, in der neue Reihen gestapelt werden. Das Flex-Wrap-Attribut legt fest, ob die untergeordneten Elemente der Flex-Box umgebrochen werden, wenn sie den übergeordneten Container überschreiten.
| Wert | beschreiben |
|---|---|
| nowrap (Standard) | Wenn die Behälterbreite nicht ausreicht, wird jeder Artikel in eine Reihe gequetscht. |
| wickeln | Wickeln Sie die Leitungen so um, dass sich die erste Zeile oben im Behälter befindet |
| Wrap-Reverse | Zeilenumbruch, und die erste Zeile befindet sich am Boden des Containers |
I. nowrap-Wert (Standardwert).
II. Wrap-Wert
Wrap umschließt die Zeile und die erste Zeile befindet sich oben im Container
III. Wrap-Reverse-Wert
Zeilenumbruch, und die erste Zeile befindet sich am Boden des Containers
1-3. Flex-Flow-Attribut
Flex-Flow ist die Abkürzung für Flex-Direction und Flex-Wrap. Der Standardwert ist: Flex-Flow: Row Nowrap; (am häufigsten verwendet)
- Flex-Richtung: Zeile (Standard)|row-reverse|column|column-reverse;
- flex-wrap:nowrap (Standard)|wrap|wrap-reverse;
1-4. justify-content-Attribut
| Wert | beschreiben |
|---|---|
| Flex-Start (Standard) | Das untergeordnete Element befindet sich am Startpunkt der Hauptachse |
| Flex-Ende | Das untergeordnete Element befindet sich am Ende der Hauptachse |
| Cent | Center |
| Raum dazwischen | An beiden Enden ist der Abstand zwischen den Elementen gleich. (Das erste und das letzte Element, keine Lücke zum übergeordneten Container) |
| Raum-um | Jedes Element hat auf beiden Seiten den gleichen Abstand und der Abstand zwischen den Elementen ist doppelt so groß wie der Abstand zwischen dem Element und dem Rand (der Anfang und das Ende haben einen bestimmten Abstand vom Rand des übergeordneten Containers). |
1-5 .align-items-Eigenschaft
Stellen Sie das Flexbox-Element auf die Seitenachse ein (Ausrichtung in Richtung der vertikalen Achse).
| Wert | beschreiben |
|---|---|
| Flex-Start | Ausrichtung des Startpunkts der Querachse |
| Flex-Ende | Endpunktausrichtung quer zur Achse |
| Cent | Richten Sie den Mittelpunkt der Querachse aus |
| Grundlinie | Die Grundlinienausrichtung der ersten Textzeile des Elements (die Höhe und Schriftgröße des Textes wirken sich auf die Grundlinie jeder Zeile aus). |
| strech (Standard) | Wenn für den Artikel keine Höhe festgelegt ist oder er auf „Automatisch“ eingestellt ist, nimmt er die gesamte Höhe des Containers ein. |