Flexbox – właściwość justify-content [CSS]

Kategoria wpisu Flexbox, Kursy, PHP, HTML, CSS Tagi: , , , on przez .



Reading Time: 1 minute

Właściwość justify-content służy do wyrównywania elementów kontenera elastycznego (flexbox), właściwość jest wykorzystywana w sytuacji gdy elementy nie wykorzystują całej dostępnej przestrzeni.

Przyjmowane wartości przez justify-content

  • flex-start – domyślne ustawienie, elementy przesunięte są na lewo
  • flex-end – elementy przesunięte na prawo
  • center – elementy są wyśrodkowane względem kontenera
  • space-between – między elementami wstawione są równe przerwy
  • space-around – elementy są pozycjonowane z spacją przed, między i po
  • initial – ustawia wartość domyślna
  • inherit – dziedziczy warowność z nadrzędnego elementu

Przykłady:

Podstawowe ustawienia CSS dla przykładów:


flex-start


flex-end


center


space-between

space-around


initial


inherit


Obsługa przez przeglądarki:

WłaściwośćChromeInternet Explorer
/ Edge
FirefoxSafariOpera
justify-content29.0
21.0 -webkit-
11.028.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

źródło:
https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Przeczytaj również

Zmienienie pierwszego elementu. Selektory CSS :fir... Selektory (pseudoklasa) :first-child i :first-of-type stanowią ciekawe rozwiązanie jakie oferuje nam CSS3 (stylach kaskadowych). Wykorzystuje się je d...
Numerowanie wierszy (rows) tabeli Jakiś czas temu stanęłam przed nowym wyzwaniem jakim okazało się policzenie ilości wierszy w tabeli . Problem przed jakim stanęłam polegał na tym, że ...
Tekst 3D na stronie internetowej – CSS Tym razem na mój warsztat trafił dość ciekawy efekt przydatny do wyróżnienia tekstu na stronie. Chodzi oczywiści o tekst 3D, a właściwie o uzyskanie e...
Nadawanie odstępu: margin i padding Dzisiaj omówię dwie bardzo użyteczne właściwości CSS czyli margin i padding. Czym jest margin i padding? Pierwsza z nich margin określa odstęp n...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *