Wyrównanie wiersza {align-items, align-self}

Co zrobić, aby wyśrodkować blok w pionie?

CSS 3

Wspólne wyrównanie wiersza {align-items}

selektor { align-items: wyrównanie }

Selektorem może być kontener elastyczny.

Wyrównanie:

flex-start - wyrównanie wiersza do początkowej krawędzi kontenera
flex-end - do końcowej krawędzi kontenera
center - wyśrodkowanie wiersza (dla tekstu w języku polskim - w pionie)
baseline - zrównanie linii bazowych (poziomych prostych, łączących podstawy liter tekstu)
stretch - rozciągnięcie do obu krawędzi jednocześnie (domyślnie)

Polecenie steruje wyrównaniem jednego wiersza wewnątrz kontenera elastycznego, kiedy mają one różną wysokość.

Przykład {align-items}

align-items: flex-start

To jest
blok nr 1

blok 2

blok 3

align-items: flex-end

To jest
blok nr 1

blok 2

blok 3

"align-items: center" - ten sposób pozwala wyśrodkować w pionie element, nawet jeżeli z góry nie wiemy, ile treści będzie się w nim znajdować:

To jest
blok nr 1

blok 2

blok 3

align-items: baseline

blok 1

blok 2

blok 3

align-items: stretch

To jest
blok nr 1

blok 2

blok 3

Indywidualne wyrównanie wiersza {align-self}

selektor { align-self: wyrównanie }

Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener)..

Jako wyrównanie należy podać jedną z wartości - analogicznie jak w przypadku wspólnego wyrównania. Oprócz tego można ustawić wartość "auto" (domyślnie), która oznacza przejęcie sposobu wyrównania z kontenera.

Wyrównanie indywidualne pozwala ustawić w różny sposób każdy z elementów kontenera elastycznego. Jeżeli jednak wszystkie mają być wyrównane tak samo, korzystniej będzie zrobić to dla nich wspólnie.

Pytania i odpowiedzi {align-items}

Co robi "align-items"?

W kontekście flexbox CSS, właściwość align-items służy do określenia, jak elementy mają być wyśrodkowane wzdłuż osi poprzecznej (prostopadłej do głównej osi). Możliwe wartości to "flex-start" (domyślne, wyśrodkowanie u góry), "flex-end" (wyśrodkowanie u dołu), "center" (wyśrodkowanie w środku), "stretch" (rozciągnięcie, aby wypełnić całą dostępną przestrzeń) i inne. Dzięki align-items można kontrolować pozycję elementów w kontenerze flexbox.

Jak wyśrodkować w pionie CSS?

Aby wyśrodkować zawartość w pionie za pomocą CSS, można użyć właściwości align-items z wartością center w kontenerze flexbox. Oto przykład: .kontener { display: flex; align-items: center; /* Wyśrodkowanie w pionie */ }.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`align-items: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	16 2013-08-27	9 2015-09-30
`align-self: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30

Komentarze

Zobacz więcej komentarzy