Właściwość CSSFlexbox
align-self
Nadpisuje wyrównanie jednego elementu na osi poprzecznej.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy flex, elementy grid i elementy pozycjonowane absolutnie
- JavaScript
element.style.alignSelf = "flex-end"
Przykład
#CSS
.row {
display: flex;
align-items: flex-start;
}
.row .action {
align-self: center;
}HTML przykładu
<div class="row stage" style="gap: 12px;">
<div><strong>Moduł 3: Flexbox</strong><br>Oś główna, oś poprzeczna i wyrównanie elementów w kontenerze.</div>
<button class="action" type="button">Start</button>
</div>Podgląd
Definicja i zastosowanie
#Właściwość align-self ustawia się na pojedynczym elemencie flex lub grid, a nie na kontenerze. Pozwala wyłamać ten element z ogólnego wyrównania ustalonego przez align-items rodzica.
Typowe przykłady to przycisk przyklejony do dołu karty, ikona wyśrodkowana w pionie obok wysokiego tekstu albo jeden element rozciągnięty, podczas gdy pozostałe stoją u góry.
Wartość auto oznacza „rób to, co mówi align-items rodzica”.
Składnia
#Składnia
align-self: auto | stretch | flex-start | flex-end | center | baseline;Wartości
#Wartości w praktyce
#auto
Element słucha
align-items rodzica (tu flex-start)..target { align-self: auto; }center
Tylko element 2 staje na środku.
.target { align-self: center; }flex-end
Tylko element 2 przylega do dołu.
.target { align-self: flex-end; }stretch
Element 2 rozciąga się na całą wysokość.
.target { align-self: stretch; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do wyrównania na osi głównej nie ma
justify-selfw Flexboxie. Użyj marginesuauto, na przykładmargin-left: auto. align-selfustawiasz na dziecku, aalign-itemsna rodzicu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.