Przejdź do treści

Układ elastyczny

Wyrównanie wierszy

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)

selektor { align-content: wyrównanie }
Selektorem może być kontener elastyczny, którego elementy zostały ułożone w wielu wierszach.

Wyrównanie:
  • flex-start - wyrównanie wierszy do początkowej krawędzi kontenera
  • flex-end - do końcowej krawędzi kontenera
  • center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie)
  • space-between - równe odstępy między wierszami
  • space-around - równa przestrzeń wokół wierszy
  • stretch - rozciągnięcie wierszy do obu krawędzi jednocześnie (domyślnie)

Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą dostępną przestrzeń.

Przykład:

align-content: flex-start

blok 1
blok 2
blok 3
blok 4
blok 5

align-content: flex-end

blok 1
blok 2
blok 3
blok 4
blok 5

align-content: center

blok 1
blok 2
blok 3
blok 4
blok 5

align-content: space-between

blok 1
blok 2
blok 3
blok 4
blok 5

align-content: space-around

blok 1
blok 2
blok 3
blok 4
blok 5

align-content: stretch

blok 1
blok 2
blok 3
blok 4
blok 5

Komentarze

Zobacz więcej komentarzy