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