Das Attribut align-content wird verwendet, um die vertikale Anordnung von Elementen innerhalb der freien Box festzulegen.
CSS-align-content-Eigenschaft
Funktion: align-content-Eigenschaft Es wird verwendet, um die vertikale Anordnung von Elementen innerhalb der freien Box festzulegen; es ändert das Verhalten des Flex-Wrap-Attributs.
Nutzungsbedingungen:
Sie müssen das Free-Box-Attribut display:flex für das übergeordnete Element festlegen und den Anordnungsmodus auf horizontale Anordnung flex-direction:row festlegen ; und legen Sie dann den Zeilenumbruch „flex-wrap:wrap“ fest, damit die Einstellung dieser Eigenschaft wirksam wird.
Erklärung: Das align-content-Attribut wirkt sich auf die Elemente im Container aus und legt fest, dass im Container mehrere Zeilen mit Elementen vorhanden sein müssen, um den Effekt darzustellen.
Syntax:
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
Wertbeschreibung:
stretch: Standardwert, das Element wird gestreckt, um in den Container zu passen. Erweitert den Platz, den jedes Element im Container einnimmt, indem unter jedem Element Leerraum hinzugefügt wird.
Mitte: Den Abstand zwischen Elementen aufheben und alle Elemente vertikal zentrieren, sodass sich das Element in der Mitte des Containers befindet.
Flex-Start: Entfernt den Abstand zwischen Elementen und platziert die Elemente oben auf dem Container, sodass sich das Element am Anfang des Containers befindet.
flex-end: Entfernt den Abstand zwischen den Artikeln und platziert die Artikel am Boden des Behälters, sodass sich das Element am Ende des Behälters befindet.
Leerzeichen dazwischen: Richten Sie Elemente an beiden Enden vertikal aus. Das heißt, der obere Artikel ist an der Oberseite des Behälters ausgerichtet und der untere Artikel ist an der Unterseite des Behälters ausgerichtet. Lassen Sie zwischen den einzelnen Elementen den gleichen Abstand.
space-around: Lassen Sie über und unter jedem Element den gleichen Abstand, sodass der Abstand zwischen den Elementen doppelt so groß ist wie der Abstand eines einzelnen Elements.
Beispiel für die Verwendung der CSS-Eigenschaft „align-content“
<!DOCTYPE html>
<html>
<head>
<style>
#main1,#main2,#main3,#main4,#main5,#main6{
width: 70px;
height: 250px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin:10px;
float:left;
}
div *{
width: 70px;
height: 70px;
}
#main1 {
-webkit-align-content: stretch;
align-content: stretch;
}
#main2 {
-webkit-align-content: center;
align-content: center;
}
#main3 {
-webkit-align-content: flex-start;
align-content: flex-start;
}
#main4 {
-webkit-align-content: flex-end;
align-content: flex-end;
}
#main5 {
-webkit-align-content: space-between;
align-content: space-between;
}
#main6 {
-webkit-align-content: space-around;
align-content: space-around;
}
</style>
</head>
<body>
<h1>align-content属性</h1>
<div id="main1">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main2">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main3">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main4">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main5">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main6">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Align-Content-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
