Przejdź do treści

Układ elastyczny - CSS

Justowanie zawartości {justify-content}

Jak równomiernie wyrównać elementy na stronie?

CSS 3 - Chrome Firefox Edge Opera Safari

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

Komentarze

Zobacz więcej komentarzy

Facebook