Flexbox – część trzecia

Dzisiaj czas na ostatnią część flexboxa, która dotyczy właściwości kontenera. Właściwości elementów (items) w kolejnej części.

 

Tym razem będzie krótko z jednego powodu. Otóż dla kontenera została do omówienia tylko jedna właściwość. Aby tego nie mieszać to właściwości dotyczące elementów postanowiłem napisać w osobnym poście 😉

 

align-content

Dzięki ten właściwości ustalamy jak mają zachować się elementy w wielu liniach względem osi „cross axis” – nie działa jeśli jest tylko jedna linia elementów dlatego w przykładach dodałem kilka dodatkowych elementów.

Domyślną wartością jest

która rozciąga elementy aby zapełniły całą oś „cross axis” (o ile elementy nie mają przypisanych rozmiarów – „height” lub „width” w zależności od układu osi).

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

 

Pozostałe wartości są takie same jak dla „justify-content”. Zaczynając od początku:

ustawia wszystkie linie od początku osi „cross axis”

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

 

Jak jest „start” to musi być też

które przenosi wszystkie linie na koniec osi

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

 

Następnie mamy umieszczanie lini w środku osi

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

 

Kolejną wartością jest

Ustawia linie tak aby odstęp pomiędzy nimi był równy (o ile jest dostępne miejsce).

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

 

I ostatnia wartość, która ustawia linie tak aby każda linia była otoczona taką samą ilością przestrzeni (o ile jest dostępne miejsce) to

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

 


Post 3 z 4 z serii Flexbox