Co to jest flexbox?
FLEXBOX – wprowadzenie
Dosłownie możemy tłumaczyć go jako elastyczny model skrzynkowy, którego używamy do projektowania interfejsu aplikacji i stron internetowych. W tym modelu używamy pojemnika – rodzica, w którym umieszczamy dzieci (np. section
, w której jest jeden lub więcej div
). Rodzic jest elastycznym pojemnikiem a dzieci w nim umieszczone, możemy ułożyć w dowolnym kierunku zarówno w pionie jak i w poziomie. Dzieci nie wystają poza pojemnik, mogą się zwiększać w zależności od potrzeb, zmniejszać, przeskakiwać do nowej linii itd. Generalnie flexbox to ogromne ułatwienie dla projektantów stron internetowych. Daje bardzo dużo możliwości manipulowania dziećmi elastycznego rodzica.
FLEXBOX – możliwości
Do pojemnika (sekcji, diva, article itd.) w css dodajemy display: flex
. Dzięki temu dzieci, które się w nim znajdują mogą:
- zostać ułożone w dowolnym kierunku: w lewo, prawo, w dół a nawet w górę,
- zostać ustawione w dowolnej kolejności,
- dopasować swoje rozmiary do rozmiaru rodzica, aby nie marnować przestrzeni,
- wyrównywać się do siebie nawzajem,
- mieć jednakową wysokość niezależnie od ilości treści, którą zawierają
i wiele wiele innych!
FLEXBOX – terminologia
flex-container
flex-container to pudełko, któremu przypisaliśmy w css cechę: display: flex
.
Flex-items
flex-items to dzieci, które są umieszczone we flex-containerze.
Main-axis i cross-axis
main-axis to oś główna wzdłuż, której domyślnie układają się elementy, cross-axis to oś prostopadła do osi głównej.
FLEXBOX to nie jest układ blokowy
Flexbox nie jest układem blokowym w związku z czym w odniesieniu do niego nie zadziałają:
float
clear
vertical-align
:first-line
,:first-letter
FLEXBOX – cechy
Niektóre z poniższych cech należy przyporządkować do flex-containera a inne do flex-item. Na początku opisu zaznaczam, którego elementu dotyczą podane cechy.
flex-direction
flex-direction DOTYCZY: flex-container
Flex-direction określa jak dzieci ułożone są w linii „main-axis” czyli w osi głównej (patrz na rysunek powyżej). Ustala kierunek. Możliwe wartości:
- row – w kierunku pisania, tak jak oś główna jest narysowana na rysunku powyżej,
- row-reverse – w kierunku odwrotnym do powyższego,
- column – układ kolumnowy, z góry na dół,
- column-reverse – z dołu do góry.
Wartością domyślną jest: row.
flex-wrap
flex-wrap DOTYCZY: flex-container
Flex-wrap określa czy dzieci będą przechodzić do nowej linii czy nie i w jakiej kolejności. Możliwe wartości:
- nowrap – dzieci muszą się zmieścić w jednej linii, będą się zwężać,
- wrap – jak zabraknie miejsca, przejdą do linii poniżej, pierwsze dziecko w niższej linii ustawi się z lewej strony (tam gdzie jest main-start – patrz na rysunek powyżej), kolejne ustawi się po jego prawej stronie,
- wrap-reverse – tak jak w przypadku wrap, dzieci przechodzą do nowej linii, natomiast ustawiają się w odwrotnej kolejności.
Wartością domyślną jest: nowrap.
flex-flow
Flex-flow to skrót – zawiera w sobie flex-direction i flex-wrap np. div { flex-flow: column wrap; }
.
order
order DOTYCZY: flex-item
Order umożliwia zmianę domyślnej kolejności wyświetlania się dzieci (innej niż została zapisana w kodzie). Jeśli np. trzeciej zakładce w poziomym menu przypiszemy order: -1;
to pojawi się ona wcześniej niż wszystkie pozostałe, konkretnie przed pierwszą.
Lepszy i bardziej użyteczny przykład:
Wartością domyślną jest: 0.
justify-content
justify-content DOTYCZY: flex-container
justify-content wyrównuje elementy wzdłuż osi głównej. Możliwe wartości:
- flex-start – elementy wyrównują się do lewej strony (main-start), jeżeli nie wypełnią całej szerokości to wolne miejsce zostanie z prawej strony,
- flex-end – odwrotnie niż flex-start – wolne miejsce zostanie po prawej,
- center – elementy wyrównują się do środka flex-containera,
- space-between – w przypadku trzech elementów: pierwszy i trzeci przylegają do krawędzi, środkowy natomiast jest na środku,
- space-around – żaden element nie przylega do krawędzi, wokół każdego tworzy się taka sama przestrzeń.
Wartością domyślną jest: flex-start.
align-items i align-self
align-items DOTYCZY: flex-container
align-self DOTYCZY: flex-item
align-items i align-self określa wyrównanie dzieci w pionie. Możliwe wartości:
- flex-start – dzieci, które są obok siebie, wyrównują się do linii cross-start (patrz na rysunek powyżej),
- flex-end – elementy wyrównują się do linii cross-end,
- stretch – rozszerzają się od cross-start do cross-end bez względu na zawartość,
- center – wyrównują się do środka każdego dziecka,
- baseline – wyrównanie do linii bazowej każdego dziecka.
Wartością domyślną jest stretch.
align-content
align-content DOTYCZY: flex-container + multiline
align-content wyrównuje elementy flex-containera w osi głównej. Mówiąc prościej – ustawia je w pionie kiedy jest więcej niż jedna linia. Możliwe wartości:
- flex-start – wyrównuje linie (wiersze) do góry, do linii cross-start,
- flex-end – wyrównuje je do linii cross-end – wolna przestrzeń pozostaje na górze,
- center – wyrównuje je do środka flex-containera,
- space-between – pierwsza linia jest przyczepiona do cross-start, ostatnia do cross-end a środkowa jest w centrum,
- space-around – dodaje przestrzeń między każdą linią,
- stretch – wszystkie elementy są rozciągnięte i mają jednakową wysokość.
Wartością domyślną jest: stretch.
flex
flex to skrót cech, które dokładniej omówię poniżej.
flex: flex-grow | flex-shrink
Ostatnie trzy cechy, które chciałabym omówić dotyczą flex-item. Istotna we flexboxie jest możliwość tworzenia elementów elastycznych, które skurczą się, aby zapobiec przepełnieniu flex-containera lub zmienią wysokość czy szerokość, aby wypełnić wolną przestrzeń. Pomagają w tym cechy: flex-grow, flex-shrink i flex-basis
flex-grow – wartością jest numer. Domyślną wartością jest: 0. Określa proporcje w jakich jeden z elementów będzie rósł względem pozostałych przy rozszerzaniu okna.
flex-shrink- wartością jest numer. Domyślną wartością jest: 1. Określa proporcje w jakich jeden z elementów będzie się kurczył względem pozostałych przy zwężaniu okna.
Podsumowanie
Flexbox pozwala na elastyczne układanie i manipulowanie elementami układu interfejsu. Ułatwia bardzo wiele podczas projektowania. Jego największym obecnym konkurentem jest grid, który omówię w innym artykule.
Generalnie opisy działania flexboxa mogą wydawać się dość skomplikowane lub chaotyczne. Korzystanie z niego jest jednak bardzo łatwe i daje mnóstwo możliwości. Przygotowałam ściągę dla ułatwienia we wpisie: FLEXBOX – ŚCIĄGA i artykuł z przykładem wykorzystania flexboxa: ELEMENTY RÓWNEJ WYSOKOŚCI.
Aby nauczyć się flexboxa w praktyce polecam rewelacyjną grę: http://flexboxfroggy.com/#pl lub oficjalną dokumentację – link do niej znajduje się poniżej.
BIBLIOGRAFIA:
Specyfikacja: https://www.w3.org/TR/css-flexbox/.