books-css

FlexBox – czyli jak prosto tworzyć responsywne layouty

Z artykułu dowiesz się:

  1. Jak działa FlexBox
  2. W jaki sposób używać go poprawnie
  3. Zobaczysz w praktyce możliwe użycia wraz z kodem

Czym jest flexbox?

Do tworzenia layoutów stron web developerzy potrzebowali czegoś bardziej elastycznego niż tabele (znacznik <table>) lub opływanie elementów właściwością “float”. Organizacja W3C zajmująca się standardami pisania stron WWW musiała opracować lepszy sposób tworzenia layoutów. Potrzebny był również wtedy łatwy sposób by dostosować strony czytelne dla  komputerów stacjonarnych do przeglądania mobilnego, bez potrzeby pisania dodatkowej mobilnej wersji strony.

Flexbox osiągnął duży sukces dzięki ułatwieniu kontroli nad wolną przestrzenią na stronie oraz zmiany rozmieszczenia elementów strony w zależności od rozmiaru okna przeglądarki. Dziś flex jest nieodłącznym elementem pisania responsywnych layoutów, dlatego każda nowoczesna przeglądarka w pełni wspiera ten moduł CSS.

caniuse-flexbox

Źródło: www.caniuse.com


Wstęp do flexboxa

Na początek musimy poznać parę pojęć związanych z flexbox’em, które będą nam potrzebne do lepszego zrozumienia tworzenia szkieletów stron opartych o elastyczny kontener.

Flex container to nasz element HTML na którym wywołaliśmy zachowanie flex, a flex item to wszystkie bezpośrednie dzieci flex container’a.

Wszystkie dzieci flex container’a układają się względem dwóch osi. Main axis to oś wzdłuż której układają się wszystkie elementy blokowe w kontenerze. Początek i koniec kontenera definiuje nam main start oraz main end, wszystkie flex itemy zmierzają od main startu do main endu.

Z kolei oś cross axis jest osią prostopadłą do main axis, analogicznie cross start i cross end definiuje nam koniec i początek flex containera dla tej osi. Main size i cross size to wysokość lub szerokość naszego układu.

Tworznie kontenera

Aby stworzyć elastyczny kontener wystarczy dodać właściwość display:

.flex-container{
     display: flex; /* lub inline-flex */
 } 

Od teraz nasz element z klasą “flex-container” posiada już wszystkie właściwości, a jego bezpośrednie dzieci stały się elastycznymi elementami.

Jedyna różnica pomiędzy flex a inline-flex polega na zachowywaniu się kontenera liniowo, w żaden sposób nie wpływa to na flex item’y.

Właściwości kontenera

Flex-direction – definiuje nam kierunek, w którym mają się układać bloki w kontenerze, czyli kierunek osi głównej (main axis). Możliwe wartości:

.flex-container{     
    display: flex;     
    flex-direction: row /* domyślne | row-reverse | column | 
     column-reverse */
}

main-flexbox

Flex-wrap – odpowiada za przeniesienie bloku do nowego wiersza jeżeli ten się nie mieści w kontenerze, bloki zawijają się w stronę cross axis.

.flex-container{
    display: flex;
    flex-wrap: nowrap /* domyślne | wrap | wrap-reverse */
}
nowrap-flexbox

Pokarze jeszcze jeden przykład, by zobaczyć, jak wrap będzie się zachowywał, gdy zmienimy main axis, a co za tym idzie cross axis.

.flex-container{
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
}
flex-wrap

Flex-flow – skrót łączący w sobie direction i wrap, zamiast pisać te właściwości osobno możemy zapisać w jednej linijce.

.flex-container{
    display: flex;
    flex-flow: wrap column; /* flex-wrap flex-direction*/
}

Justifty-content – pomaga nam ustawić bloki wzdłuż main axis oraz mówi jak elementy mają się rozłożyć względem wolnej przestrzeni.

.flex-container{
    display: flex;
    Justify-content: flex start /* domyślne | flex-end | center | space-between | space-around */
}

Flex-start – umieszcza bloki na początku osi main axis

flex-start

Flex-end – umieszcza bloki na końcu osi main axis.

flex-end

Center – umieszcza wszystkie bloki na środku, cala wolna przestrzeń rozkładana na lewo i prawo skrajnych elementów.

center

Space-around – nadaje każdemu z bloków taką samą wolną przestrzeń po bokach, czyli wszystkie elementy będą miały taką samą przestrzeń między sobą z wyjątkiem przestrzeni między krawędzią a pierwszym i ostatnim blokiem, która będzie dwa razy mniejsza niż ta między dwoma innymi blokami.  

space-around

Space-between – bloki maja taki sam odstęp od siebie z wyjątkiem pierwszego i ostatniego, które nie mają żadnego odstępu od krawędzi.

space-between

Space-evenly – bloki zostają rozłożone tak by przestrzenie między nimi były takie same, tak samo dla skrajnych elementów.

space-evenly

Align-items

służy do ustawienia bloków tym razem względem osi cross axis oraz mówi, jak elementy mają się rozłożyć względem wolnej przestrzeni.

.flex-container{
    display: flex;
    align-items: stretch /* domyślne | baseline | center | flex-start | flex-end*/
}

Stretch – rozciąga wszystkie bloki wzdłuż osi cross axis

align-items-stretch

Baseline – bloki układają się tak aby baseline każdego z nich utworzył linie prostą zgodną z kierunkiem main axis. Baseline to linia występująca na poziomie tekstu tak jak na obrazku.    

baseline
baseline

Center – ustawia bloki na środku w osi zgodnej z cross axis    

align-items-flex-start

Flex-start – umieszcza bloki na początku osi cross axis

align-items-flex-start

Flex-end – ustawia bloki na końcu osi cross axis    

align-items-flex-end

Align-content – pomaga zagospodarować miejsce między kolejnymi wierszami, w kontenerze które powstały np. dzięki “wrapowaniu” bloków. Działa tylko gdy jest więcej niż jeden wiersz.

.flex-container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch /* domyślne | center | flex-start | flex-end | space-around | space-between*/
}

Stretch – rozciąga wszystkie bloki na całą wolną przestrzeń wzdłuż osi cross axis

align-content-stretch

Center – wiersze zbiegają się w środku kontenera

align-content-center

Flex-start – ustawia wszystkie wiersze na początku osi cross axis

align-content-flex-start

Flex-end – umieszcza wszystkie wiersze na końcu osi cross axis

align-items-flex-end

Space-around – nadaje każdemu wierszowi taką samą przerwę, czyli wszystkie wiersze będą miały taką samą przestrzeń między sobą z wyjątkiem przestrzeni między krawędzią a ostatnim i pierwszym wierszem, która będzie dwa razy mniejsza niż ta między dwoma innymi wierszami

align-contents-space-around

Space-between – nadaje wierszom taką samą odległość między sobą z wyjątkiem pierwszego i ostatniego, które są przeklejone do krawędzi

align-contents-space-between

Space-evenly – wiersze zostają tak rozłożone, aby wszystkie odległości między nimi były takie same

align-contents-space-evenly

Łatwe wyśrodkowanie

Dzięki flexboxowi możemy w bardzo łatwy sposób wyśrodkować item lub parę bloków w kontenerze. Kiedyś bez znajomości rozmiaru kontentu nie było to takie proste.

.flex-container{     
    display: flex;    
    justify-content:center;
     align-items: center;
}
center

Właściwości flex itemów

Order – pozwala zmieniać kolejność ułożenia bloków w zależności od potrzeby. Domyślna wartość to 0, jeżeli dwa bloki maja taki sam order wtedy struktura HTML decyduje o ich ułożeniu. Dopuszczalne są też ujemne wartości.

.flex-container{     
    display: flex;
}
.item:nth-child(1){    
    order: 1;
}
.item:nth-child(4){    
    order: -1;
}
orders

Flex-grow – podajemy tu liczbę całkowitą. Od niej zależy jaką część pozostałej wolnej przestrzeni w osi main axis ma zająć blok. Jeżeli ustawimy tę właściwość tylko na jednym dziecku, to dostanie ono dodatkowo całą wolną przestrzeń.

flex-grow

W tym przykładzie mamy dużo wolnej przestrzeni do zaaranżowania. Poprzez dodanie do bloku 2 i 3 flex grow  na 1, wolna przestrzeń podzieli nam się po równo dla każdego z nich. Rozdzielenie wolnego miejsca jest oparte o proporcje wartości flex-grow danego bloku do sumy wartości flex-grow wszystkich bloków kontenera.

.flex-container{ 
    display: flex;
}

.item:nth-child(2){
   flex-grow: 1; /* domyślnie 0 */
}

.item:nth-child(3){
   flex-grow: 1; /* domyślnie 0 */
}
grow-advance

Flex-shrink – działa analogicznie jak flex-grow z tą różnica ze określamy tutaj wartości dla zmniejszania się bloków w kontenerze, jeżeli jest to konieczne. Domyślna wartość 0 powoduje ze item się nie zmniejsza.

.flex-container{
    display: flex;
}
.item{
    flex-shrink: 1; /* domyślnie 0 */
}

Flex-basis – określa nam wysokość/szerokość bloku w zależności od ustawienia osi main axis. Wartość flex-basis nie może zostać nadpisana przed width ani height. Domyślną wartością jest “auto”, wtedy przeglądarka sprawdza wartość height lub width.

.flex-container{
    display: flex;
}
.item{
    flex-basis: 100px; /* domyślnie auto */
}

Flex – kolejny bardzo przydatny skrót łączący w sobie flex-grow, flex-shrink oraz flex-basis.

.flex-container{
    display: flex;
}
.item:nth-child(1){
    flex: 1 3 600px /* flex-grow flex-shrink flex-basis */
}

Align-self – pozwala nam nadpisać align-items dla pojedynczego bloku. Posiada takie same wartości jak align-items.


.flex-container{    
    display: flex;
    align-items: flex-end;
}
.item:nth-child(2){
    self-align: flex-start;
}
.item:nth-child(4){
    self-align: center;
}
align-self

Praktyka najlepszą nauką!

Jeżeli nadal niepewnie czujesz się z flexem możesz przejść jedna z gier stworzonych specjalnie z myślą o nauce flexboxa. Pozwoli Ci to przetestować znajomość właściwości elastycznego kontenera oraz jego dzieci. Oto parę przykładów takich “gierek”

https://flexboxfroggy.com/#pl

http://www.flexboxdefense.com/