Właściwość justify-content
Jeśli elementy, tzn.boxy nie wykorzystują całego dostępnego miejsca kontenera, to możemy zarządzać nimi jak mają być rozmieszczone.
Właściwość justify-content jest złotym środkiem na rozwiązanie problemu. Przyjmuję ona następujące wartości:
- flex-start – wartość domyślna, elementy są wyświetlane od początku kontenera,
- flex-end – elementy są wyświetlane od końca kontenera,
- center – elementy są wyświetlane pośrodku wiersza,
- space-between – przestrzeń która pozostała jest dzielona i wykorzystywane między elementami,
- space-around – pozostała przestrzeń znajduje się przed, po oraz pomiędzy elementami.
Spójrz na poniższy przykład. Zobaczysz w nim różnice między powyższymi wartościami dla właściwości justify-content:
tender-knuth-06pd0
tender-knuth-06pd0 by danielminschinski
Właściwość align-items
Powyższa właściwość odpowiada za zarządzaniem elementami w poziomie.
Kolejna właściwość którą chce Wam przedstawić jest to align-items. Odpowiada ona za zarządzaniem elementami oraz wolną przestrzenią w kontenerze.
Przyjmuje ona następujące wartości:
- stretch – wartość domyślna, elementy pokrywają całą dostępną przestrzeń w kontenerze,
- flex-start – umieszcza elementy na początku kontenera,
- flex-end – umieszcza elementy na końcu kontenera,
- center – umieszcza elementy na środku kontenera.
Spójrz na poniższy przykład. Zobaczysz w nim różnice między powyższymi wartościami dla właściwości align-items:
practical-feather-dvitu
practical-feather-dvitu by danielminschinski
Wstępnie poznaliście pozycjonowanie elementów względem osi x i y. Prawda że łatwe? Mam nadzieje że dość czytelnie przedstawiłem różnice między wartościami justify-content oraz align-items.
W następnym materiale przedstawię kontynuację przykładów na bazie flexboxa z nowymi właściwościami wykorzystywanymi w szkielecie strony.
Także do następnego! Planuję kolejny post wypuścić w sobotę Zapraszam do subskrypcji🔽 i polubienia mojego blogowo/usługowego ▶ fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA