#32. Pozycjonowanie elementów

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!