Align-self - CSS-Tricks

align-selfNieruchomość jest sub-property modułu Flexible Box Layout.

Umożliwia nadpisanie align-itemswartości dla określonych elementów elastycznych.

align-selfWłaściwość przyjmuje takie same wartości 5 Jako align-items:

• flex-start: krawędź marginesu skrzyżowania elementu jest umieszczana na linii skrzyżowania
• flex-end: krawędź marginesu przecięcia elementu jest umieszczana na linii przecięcia
• center: element jest wyśrodkowany na osi poprzecznej
• baseline: elementy są wyrównane, na przykład ich linia bazowa jest wyrównana
• stretch (domyślnie): rozciągnij, aby wypełnić kontener (nadal przestrzegaj min-width / max-width)

Składnia

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

Próbny

Poniższe demo pokazuje, jak element może wyrównać się w kontenerze elastycznym w zależności od align-selfwartości:

• Pierwsza pozycja jest ustawiona na flex-start
• Druga pozycja jest ustawiona na flex-end
• Trzecia pozycja jest ustawiona na center
• Czwarta pozycja jest ustawiona na baseline
• Piąty element jest ustawiony na stretch

Zobacz demo z wyrównywaniem pióra przez CSS-Tricks (@ css-tricks) w CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom	Firefox	TO ZNACZY	Brzeg	Safari
21 *	28	11	12	6,1 *

Telefon komórkowy / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4.4	7,0-7,1 *

Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).