Was ist das align-self-Attribut in CSS?

1. Das Attribut align-self definiert die individuelle Ausrichtung von Flex-Elementen in Richtung der Seitenachse (vertikale Achse).

2. align-self verfügt über ein zusätzliches Auto (Standardwert), das den vom Flex-Container geerbten align-items-Attributwert darstellt.

Beispiel

 .Container{
/* Flex-Container definieren */
Anzeige: Flex;
/*
Legen Sie die Anordnungsrichtung der Elemente innerhalb der Containerzeile fest: Definieren Sie die Anordnungsrichtung von links nach rechts, zeilenumgekehrt: von rechts nach links, Spalte: von oben nach unten, spaltenumgekehrt: von unten nach oben
*/
Flexrichtung: Reihe;

/*
Legen Sie die Ausrichtung der Elemente im Container auf der Querachsenstreckung fest: Wenn die Höhe des Elements nicht festgelegt ist, wird die Höhe des Elements auf die gleiche Höhe wie der Container gestreckt (Standard).
Flex-Start: In Richtung der Startposition (oben/links) auf der Querachse. Flex-Ende: In Richtung der Endposition (unten/rechts) auf der Querachse. Ausrichtungsmitte: Stellen Sie sicher, dass der Text in der Element ist gleichzeitig eine Grundlinie (stellen Sie sicher, dass sich jeder Text in derselben Zeile befindet).
*/

align-items: Grundlinie;

Höhe: 800upx;
Hintergrundfarbe: #FFC0CB;

}

            .txt{
Schriftgröße: 20px;
Breite: 150upx;
Höhe: 150upx;
}

.Rot{
Hintergrundfarbe: rot;

/*
Schreiben Sie die Ausrichtung der Elemente im Container auf der Querachse automatisch neu: Standard, was darauf hinweist, dass die Eigenschaft align-items des übergeordneten Elements geerbt wird. Strecken: Wenn die Höhe des Elements nicht festgelegt ist, wird die Höhe des Elements auf die gleiche Höhe gestreckt Höhe wie der Container (Standard)
Flex-Start: In Richtung der Startposition (oben/links) auf der Querachse. Flex-Ende: In Richtung der Endposition (unten/rechts) auf der Querachse. Ausrichtungsmitte: Stellen Sie sicher, dass der Text in der Element ist gleichzeitig eine Grundlinie (stellen Sie sicher, dass sich jeder Text in derselben Zeile befindet).
*/
align-self: center;
}

.Grün{
Hintergrundfarbe: grün;
}

.Blau{
Hintergrundfarbe: blau;
}

Das Obige ist eine Einführung in das align-self-Attribut in CSS. Ich hoffe, es wird für alle hilfreich sein.