Heim > Artikel > Web-Frontend > Wie verwende ich das CSS-Attribut „align-items“?
Wie verwende ich das CSS-Attribut „align-items“?
- 青灯夜游Original
- 2019-02-16 10:21:2423839Durchsuche
css align-items-Attribut wird verwendet, um die Ausrichtung von Elementen im Float-Container in der horizontalen Achsenrichtung anzugeben. Seine Syntax lautet „align-items: stretch|center|flex-start|flex-end|baseline ;" .
css align-items-Attribut wird verwendet, um die Ausrichtung von Elementen im Float-Container in der horizontalen Achsenrichtung anzugeben: Strecken, um den Container zu füllen, zentriert auf der horizontale Achse, oben vertikal ausgerichtet, unten vertikal ausgerichtet und an der Grundlinie der horizontalen Achse ausgerichtet. [Video-Tutorial-Empfehlung: CSS-Tutorial]
CSS-Attribut „align-items“
align-items-Attribut ist „Flexible Box“. Untereigenschaft des Layoutmoduls.
Funktion: definiert das Standardverhalten (Ausrichtung) für die Anordnung flexibler Elemente entlang der horizontalen Achse der aktuellen Zeile.
Hinweis: Sie können das Attribut align-self in jedem Unterelement innerhalb des Float-Containers verwenden, um den Stil des Attributs align-items zu überschreiben.
Syntax:
align-items: stretch|center|flex-start|flex-end|baseline;
Stretch (Standard): Dehnen, um den Container zu füllen (unter Berücksichtigung der Mindestbreite/Maximalbreite).
Mitte: Elemente werden standardmäßig auf der horizontalen Achse zentriert. Die horizontale Achse ist vertikal, was bedeutet, dass Flexbox-Elemente vertikal zentriert werden.
Flex-Start: Elemente werden am Anfang der horizontalen Achse ausgerichtet, d. h. Elemente werden vertikal oben ausgerichtet.
flex-end: Die Elemente werden am Ende der horizontalen Achse ausgerichtet, d. h. die Elemente werden unten vertikal ausgerichtet
Grundlinie: Elemente werden an der Grundlinie der horizontalen Achse ausgerichtet, d. h. die Flexbox-Elemente richten sich selbst so aus, dass die Grundlinie ihres Textes entlang der horizontalen Linie ausgerichtet ist.
Verwendungsbeispiel des CSS-Attributs align-items
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
float: left;
}
.flex-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flex-end li {
background: gold;
}
.center {
-webkit-align-items: center;
align-items: center;
}
.center li {
background: deepskyblue;
}
.baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.baseline li {
background: lightgreen;
}
.stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.stretch li {
background: hotpink;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="flex-container flex-start">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container flex-end">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container center">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container baseline">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container stretch">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
</div>
</body>
</html>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWie verwende ich das CSS-Attribut „align-items“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!