Układ elastyczny - CSS
Justowanie zawartości {justify-content}
Jak równomiernie wyrównać elementy na stronie?
CSS 3 -
selektor { justify-content: justowanie }
Selektorem może być kontener elastyczny.
Justowanie:
Justowanie:
- flex-start - do początkowej krawędzi kontenera (domyślnie)
- flex-end - do końcowej krawędzi kontenera
- center - wyśrodkowanie
- space-between - równe odstępy między elementami
- space-around - równa przestrzeń wokół elementów
Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został wypełniony w całości. Działa analogicznie jak justowanie tekstu, ale może operować na blokach.
Przykład {justify-content}
justify-content: flex-start
blok 1
blok 2
blok 3
justify-content: flex-end
blok 1
blok 2
blok 3
justify-content: center
blok 1
blok 2
blok 3
justify-content: space-between
blok 1
blok 2
blok 3
justify-content: space-around
blok 1
blok 2
blok 3