Właściwość CSSFlexbox
align-items
Wyrównuje elementy na osi poprzecznej kontenera flex lub grid.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy, efekt widać w kontenerach flex i grid
- JavaScript
element.style.alignItems = "center"
Przykład
#CSS
.profile {
display: flex;
align-items: center;
gap: 12px;
}HTML przykładu
<div class="profile stage">
<div class="box" style="border-radius: 999px">AN</div>
<div>
<strong>Anna Nowak</strong><br>
<small>Poziom 7 · 1240 EXP</small>
</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość align-items ustawia wszystkie elementy kontenera na osi poprzecznej, czyli prostopadłej do głównej. Przy wierszu (flex-direction: row) to wyrównanie w pionie: do góry, do dołu, na środek albo do linii bazowej tekstu.
Domyślnie elementy flex się rozciągają (stretch) na całą wysokość wiersza. Dlatego kolumny w układzie flex mają równą wysokość bez żadnych sztuczek.
Pojedynczy element może nadpisać to ustawienie własną właściwością align-self.
Składnia
#Składnia
align-items: normal | stretch | flex-start | flex-end | center | baseline | start | end;Wartości
#- Elementy bez ustalonej wysokości rozciągają się na całą wysokość kontenera.
- Elementy przylegają do początku osi poprzecznej, w wierszu do górnej krawędzi.
- Elementy przylegają do końca osi poprzecznej.
- Elementy ustawiają się na środku osi poprzecznej.
- Elementy wyrównują się tak, żeby linie bazowe ich tekstu leżały na jednej prostej, nawet przy różnych rozmiarach czcionki.
Wartości w praktyce
#stretch
Elementy bez ustalonej wysokości rozciągają się na całą wysokość kontenera.
.demo { align-items: stretch; }flex-start
Elementy przylegają do początku osi poprzecznej, w wierszu do górnej krawędzi.
.demo { align-items: flex-start; }flex-end
Elementy przylegają do końca osi poprzecznej.
.demo { align-items: flex-end; }center
Elementy ustawiają się na środku osi poprzecznej.
.demo { align-items: center; }baseline
Elementy wyrównują się tak, żeby linie bazowe ich tekstu leżały na jednej prostej, nawet przy różnych rozmiarach czcionki.
.demo { align-items: baseline; }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
#- Jeśli chcesz wyrównać tylko jeden element, użyj
align-selfna tym elemencie. - Przy
flex-direction: columnoś poprzeczna jest pozioma, więcalign-itemswyrównuje elementy w poziomie.
Powiązane hasła
#- justify-contentRozmieszcza elementy wzdłuż osi głównej kontenera flex lub grid.
- align-selfNadpisuje wyrównanie jednego elementu na osi poprzecznej.
- align-contentRozmieszcza całe linie elementów na osi poprzecznej kontenera.
- flex-directionUstala kierunek osi głównej: elementy flex układają się w wierszu albo w kolumnie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.