css align-self-Attribut wird verwendet, um die Ausrichtung von Flex-Elementen individuell in Richtung der Seitenachse (vertikale Achse) zu definieren: gestreckt, um in den Container zu passen, befindet sich in der Mitte des Containers, befindet sich am Anfang des Containers, befindet sich am Ende des Containers, auf der Grundlinie des Containers.
css align-self-Eigenschaft
align-self-Eigenschaft ist eine Untereigenschaft von Flexible Box Layoutmodul.
Funktion: Definieren Sie die Ausrichtung von Flex-Elementen individuell in Richtung der Seitenachse (vertikale Achse).
Hinweis: Das Attribut align-self kann das Attribut align-items des flexiblen Containers überschreiben.
Syntax
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Attributwert:
auto: Standardwert. Das Element erbt die Eigenschaft align-items seines übergeordneten Containers. „stretch“, wenn kein übergeordneter Container vorhanden ist.
Strecken: Das Element wird gedehnt, damit es in den Behälter passt. Wenn der Wert der Eigenschaft „Querachsengröße“ „auto“ ist, sorgt sein Wert dafür, dass die Größe des Randfelds des Elements so nah wie möglich an der Größe der Zeile liegt, aber gleichzeitig die Einschränkungen der „min/max“-Einstellung berücksichtigt. Breite/Höhe‘-Eigenschaften.
Mitte: Das Element befindet sich in der Mitte des Containers. Das Flexbox-Element ist auf der Querachse (vertikal) der Reihe zentriert. (Wenn die Größe der Zeile kleiner als die Größe des Flexbox-Elements ist, überläuft es in beide Richtungen die gleiche Länge).
flex-start: Das Element befindet sich am Anfang des Containers. Der Rand der Querachsen-(vertikalen) Startposition des Flexbox-Elements liegt nahe am Querachsen-Startrand der Zeile.
flex-end: Das Element befindet sich am Ende des Containers. Die Anfangskante der Querachse des Flexbox-Elements (vertikale Achse) liegt nahe der Endkante der Querachse der Reihe.
Grundlinie: Das Element befindet sich auf der Grundlinie des Containers. Wenn die Inline-Achse und die Querachse des Flexbox-Elements gleich sind, entspricht dieser Wert „Flex-Start“. Andernfalls nimmt dieser Wert an der Grundlinienausrichtung teil.
Beispiel für die Verwendung des CSS-Attributs align-self
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
height: 200px;
display: flex;
}
.flex-start {
align-self: flex-start;
}
.flex-end {
align-self: flex-end;
}
.center {
align-self: center;
}
.baseline {
align-self: baseline;
}
.stretch {
align-self: stretch;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
margin: 5px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="flex-container">
<li class="flex-item flex-start">1</li>
<li class="flex-item flex-end">2</li>
<li class="flex-item center">3</li>
<li class="flex-item baseline">4</li>
<li class="flex-item stretch">5</li>
</ul>
</div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Attribut „align-self'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
