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/.