CSS flex-wrap-Eigenschaft
Die flex-wrap-Eigenschaft definiert, ob flexible Elemente umgebrochen werden sollen oder nicht. Mit anderen Worten definiert sie, ob die Elemente auf eine einzige Zeile gezwungen werden oder ob sie auf mehrere Zeilen fließen können.
Wenn es keine flexiblen Elemente gibt, hat die flex-wrap-Eigenschaft keine Auswirkung.
Die flex-wrap-Eigenschaft ist eine der CSS3-Eigenschaften.
| Anfangswert | nowrap |
|---|---|
| Gilt für | Flex-Container. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.flexWrap = "wrap-reverse"; |
Syntax
Syntax der CSS flex-wrap-Eigenschaft
css
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Beispiel für die flex-wrap-Eigenschaft mit dem Wert "wrap":
Beispiel für die CSS flex-wrap-Eigenschaft mit dem Wert wrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Beispiel für die flex-wrap-Eigenschaft mit dem Wert "nowrap":
Beispiel für die CSS flex-wrap-Eigenschaft mit dem Wert nowrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Ergebnis
Beispiel für die flex-wrap-Eigenschaft mit dem Wert "wrap-reverse":
Beispiel für die CSS flex-wrap-Eigenschaft mit dem Wert wrap-reverse
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| nowrap | Definiert, dass flexible Elemente nicht umgebrochen werden. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| wrap | Definiert, dass flexible Elemente bei Bedarf umgebrochen werden. | Ausführen » |
| wrap-reverse | Definiert, dass flexible Elemente bei Bedarf in umgekehrter Reihenfolge umgebrochen werden. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was ist der Zweck der 'flex-wrap'-Eigenschaft in CSS?