Flexbox – część pierwsza

W ostatnim wpisie z serii Blog od podstaw, w którym pozycjonowaliśmy sekcje skorzystaliśmy z flexboxa, więc dzisiaj zgodnie z obietnicą rozwinę ten temat.

 

Wstęp

Jak wspomniałem w tamtym wpisie flexbox to model pozycjonowania elementów blokowych. Dzięki temu możemy ustawić kolejność i pozycję elementów w pionie i poziomie i opiera się na relacji kontenera i dzieci (container i items). Na początek warto poznać kilka pojęć i założeń.

 

W skład flexboxa wchodzi container i items. Items to wszystkie bezpośrednie dzieci (elementy) containera, które układają się wzdłuż dwóch osi: main axis i cross axis (których kierunek i położenie są zależne od ustawionego kierunku – flex-direction). Items zaczynają się układać od miejsc zwanych main start i cross start a kończą na main end i cross end. Nie martwcie się – więcej o tym w dalszej części.

 

Flex

Naszą bazą będzie sekcja (<section>) z pięcioma divami. Wszystkie style, które znajdują się poniżej komentarza „/* CSS */” są tylko w celach wizualizacji i nimi nie będziemy się zajmować. Dzięki nim przykłady będą lepiej „widoczne”.

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

 

Aby utworzyć flexbox wystarczy dla containera (w naszym przypadku element <section>) ustawić styl „display” na „flex” lub „inline-flex”

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

Jak widać położenie elementów zmieniło się i wszystkie położone są w jednej linii. A tak przedstawia się aktualny układ wraz z osiami:

 

Flex-wrap

W aktualny układzie bez względu na szerokość okna (czy też samego containera) wszystkie elementy (items) będą w jednej linii. Nasze elementy mają ustawiony rozmiar 100x100px (+ padding: 10px) i jeśli jest na tyle miejsca to elementy zachowają te rozmiary. Natomiast jeśli miejsca jest mniej to elementy zostaną zwężone.

W tej sytuacji na ratunek przychodzi właściwość „flex-wrap”, która przyjmuje jedną z 3 wartości: nowrap, wrap lub wrap-reverse. Domyślną wartością jest nowrap (co widać powyżej).

sprawi, że elementy zachowają swój rozmiar a te które się nie mieszczą przejdą do nowej linii

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

Natomiast

działa tak samo jak „wrap” z tą różnicą, że elementy, które się nie mieszą wskakują powyżej linii, w której brakuje dla nich miejsca

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

 

Flex-direction

Co w przypadku jeśli chcemy aby nasze elementy wyświetlały się pionowo? A może nawet od końca? Nic trudnego – wystarczy skorzystać z właściwości „flex-direction”. Domyślną wartością jest „row”, które wyświetla elementy tak jak w przykładach powyżej. Kolejną wartością jest

która wyświetla elementy w pionie.

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

Oczywiście przy zmianie kierunku zmienia się też układ osi.

 

Jak jesteśmy przy kolumnach to mamy też wartość

co pozwala wyświetlić elementy w pionie ale od końca.

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

 

Ostatnią wartością jaką możemy użyć jest

która wyświetla elementy w rzędzie (jak „row”) ale tak jak w „column-rewerse”, czyli od końca.

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

 

Warto zapamiętać jak zmienia się układ osi, gdyż od tego układu zależy kilka właściwości, które poznacie w kolejnej części.

 

PS Spróbujcie pobawić się właściwościami flex-direction i flex-wrap i zobaczyć jak elementy będą się zachowywać 😉


Post 1 z 4 z serii Flexbox