CSS / Układ elastyczny
Wyrównanie wiersza {ALIGN-ITEMS, ALIGN-SELF}
Co zrobić, aby wyśrodkować blok w pionie?
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)
Wspólne
selektor { align-items: wyrównanie }Selektorem może być kontener elastyczny.
Wyrównanie:
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: flex-start
To jest
blok nr 1
blok nr 1
blok 2
blok 3
align-items: flex-end
To jest
blok nr 1
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 nr 1
blok 2
blok 3
align-items: baseline
blok 1
blok 2
blok 3
align-items: stretch
To jest
blok nr 1
blok nr 1
blok 2
blok 3
Indywidualne
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.
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.