Przejdź do treści

Układ elastyczny - CSS

Wyrównanie wierszy {align-content}

Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?

CSS 3 - Chrome Firefox Edge Opera Safari

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}

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

Facebook