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

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



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ż

Zdarzenia myszki – pointer-events CSS Właściwość pointer-events określa jak na dane zdarzenie wywołane z użyciem kursora myszy powinien reagować konkretny obiekt HTML. Chodzi o zdarzenia ...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Menu zakończone grotem / strzałką CSS Jak pisałam w poprzednim poście CSS3 daje bardzo duże możliwości twórcą stron. Wspomniałam również o możliwości zastąpienia grafiki odpowiednią formuł...
Sześciokąty rozmieszczone obok siebie CSS Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na m...