Flexbox – część druga

Ostatnio pisałem o podstawach flexboxa – jak zacząć i jak zarządzać kierunkiem wyświetlania i zawijaniem elementów. Dzisiaj dowiecie się jak pozycjonować elementy.

 

Zanim przejdziemy do właściwego materiału to chciałbym dodać coś odnośnie poprzedniej części (gdzieś mi umknęło). Ostatnio poznaliście właściwości „flex-wrap” i „flex-direction” a w związku z tym warto wspomnieć o „flex-flow”. Za co odpowiada? Otóż jest to skrócony zapisy obu tych właściwości:

Domyślnie przyjmuje wartości:

 

justify-content

Właściwość ta odpowiada ułożenie elementów względem osi „main axis” i przypisywana jest do kontenera. Jeśli położenie lub kierunek tej osi ulegnie zmianie to zmianie ulegnie również sposób pozycjonowania elementów. Domyślną wartością jest

i zachowanie elementów poznaliście w poprzedniej części – przy każdej zmianie  osi „main axis” elementy flexboxa ustawiały się względem początku tej osi.

 

Przeciwieństwem jest

które pozycjonuje elementy od końca osi „main axis”

http://codepen.io/morawcik/pen/jBjxyr

 

Kolejną wartością, jaką może przyjąć justify-content jest

Nietrudno się domyślić, że wyśrodkowuje elementy względem kontenera.

http://codepen.io/morawcik/pen/NpZzba

 

Następnie mamy

Dzięki tej wartości pomiędzy elementami będzie rozdysponowane wolne miejsce z kontenera (po równo pomiędzy każdym elementem)

http://codepen.io/morawcik/pen/VpJdPL

 

I ostatnią wartością jest

która po każdej stronie kontenera przypisuje taką samą przestrzeń.

http://codepen.io/morawcik/pen/VpJdpv

 

A co w przypadku zmiany zmiany osi „main axis”? Jak wspomniałem elementy ułożą się względem tej osi po zmianie. Zobaczcie ostatni przykład ze „space-around” (dla zademonstrowania potrzebujemy nadać sekcji odpowiednią wysokość)

http://codepen.io/morawcik/pen/RpzJVR

 

align-items

Ta własność definiuje jak elementy mają zachować się względem osi „cross axis”. Aby móc zademonstrować wszystkie wartości nasz kontener będzie miał ustawioną wysokość na 500px oraz obramowanie aby pokazać gdzie się kończy a gdzie zaczyna.

Pierwszą wartością jest (jak w przypadku „justify-content”)

dzięki której elementy są „przypięte” do początku osi „cross axis”

http://codepen.io/morawcik/pen/RpzJZG

 

Oczywiście nie może zabraknąć przeciwieństwa, które przeniesie elementy na koniec osi „cross axis”

http://codepen.io/morawcik/pen/PpraOm

 

Możemy też wyśrodkować względem osi „cross axis” za pomocą wartości

http://codepen.io/morawcik/pen/qrzKxE

 

Następnie mamy wartość

która jest domyślną wartością. Wartość ta rozciąga elementy na całą długość osi „cross axis” ale z zachowaniem właściwości dotyczących wysokości/szerokości dla elementów. Dlatego aby ją zademonstrować w tym przykładzie wyłączę wysokość ustawianą dla elementów – w przeciwny razie elementy te dalej miałyby tylko 100px wysokości.

http://codepen.io/morawcik/pen/peXKaO

 

I ostatnią wartością jest

Ta wartość pozycjonuje elementy względem tekstu w nich zawartego. Aby dobrze to ukazać to dla elementu „2” zmienimy rozmiar czcionki.

http://codepen.io/morawcik/pen/aJgRjo


Post 2 z 4 z serii Flexbox