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
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
selektor { align-content: wartość } | 29 2013-08-20 | 28 2014-03-18 | 12 2015-07-29 | 16 2013-08-27 | 9 2015-09-30 |
selektor { align-content: center } | 21 2012-07-31 | 28 2014-03-18 | 12 2015-07-29 | 15 2013-07-02 | 9 2015-09-30 |
selektor { align-content: flex-end } | 21 2012-07-31 | 28 2014-03-18 | 12 2015-07-29 | 15 2013-07-02 | 9 2015-09-30 |
selektor { align-content: flex-start } | 21 2012-07-31 | 28 2014-03-18 | 12 2015-07-29 | 15 2013-07-02 | 9 2015-09-30 |
selektor { align-content: space-around } | 60 2017-07-25 | 52 2017-03-07 | 79 2020-01-15 | 47 2017-08-09 | 11 2017-09-19 |
selektor { align-content: space-between } | 60 2017-07-25 | 52 2017-03-07 | 79 2020-01-15 | 47 2017-08-09 | 11 2017-09-19 |
selektor { align-content: stretch } | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 9 2015-09-30 |
