Przejdź do treści

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:
  • 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

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
justify-content: wartość29
2013-08-20
20
2013-04-02
12
2015-07-29
12.1
2012-11-20
9
2015-09-30

Komentarze

Zobacz więcej komentarzy

Facebook