Przejdź do treści

Układ elastyczny

Wyrównanie wiersza

(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:
  • 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 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

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.

Komentarze

Zobacz więcej komentarzy