Flexbox – część czwarta

W przeciwieństwie do poprzednich właściwości te podane w dzisiejszym poście dotyczą elementów (items) i pozwalają manipulować każdym elementem z osobna.

 

order

Pozwala określić w jakiej kolejności będą wyświetlać się poszczególne elementy. Domyślnie elementy wyświetlają tak jak zostały utworzone w kodzie i właściwość „order” ma wartość „0” (zero).  Przypuśćmy, że chcemy aby element trzeci wyświetlał się jako pierwszy – w takiej sytuacji musimy ustawić mu

https://codepen.io/morawcik/pen/RVQVMW

 

A jeśli chcemy dodatkowo by element „2” był ostatni:

https://codepen.io/morawcik/pen/MmQmNP

 

Dla przykładu zmieńmy teraz element „1” aby był ostatni a „2” tym samym będzie przedostatni

https://codepen.io/morawcik/pen/JNpJjj

 

flex-grow

Określa jak bardzo element ma być rozciągnięty tak by elementy wypełniały cały kontener. Domyślna wartość to „0” (zero) a jeśli jakiemu elementowi (albo kilku elementom) ustawimy wartość na „1” wtedy te elementy rozciągną się tak by cały kontener był zajęty.

https://codepen.io/morawcik/pen/PmQjwj

 

Teraz, jeśli jakiś element będzie miał ustawioną wartość „2” to elementy tak się dopasują by ten z wartością „2” pobrał dwa razy więcej (niż element „1”) wolnej przestrzeni z kontenera. Jak to rozumieć? Dla przypomnienia – mamy ustawione „width: 100px” dla każdego elementu. „flex1” w poniższym przykładzie jest rozciągnięty do szerokości 310px a „flex2” do 520px czy „flex1” dostał dodatkowe 210px a „flex2” 420px – dwa razy więcej.

Można to też zobrazować tak: mając 2 elementy z ustawionym „flex-grow” na „1” i „2” pobieramy wolną przestrzeń w kontenerze i dzielimy na 3 (1 + 2) i wstawiamy odpowiednio jedną część dla „1” i dwie części dla „2”. Jeśli mielibyśmy elementy z „flex-grow” na „2” i „3” to przestrzeń byłaby podzielona na 5 i przypisane odpowiednio dwie części i trzy części.

https://codepen.io/morawcik/pen/MmQovR

 

flex-shrink

Określa czy element może być zwężany jeśli kontener nie ma wystarczająco miejsca by pomieścić wszystkie elementy (nie działa przy użyciu np. „flex-wrap: wrap”). Domyślna wartość to „1”. W naszych przykładach elementy mają szerokość 100px czyli łącznie mają 500px więc dla demonstracji szerokość kontenera będzie ustawiona na 300px.

https://codepen.io/morawcik/pen/PmQKYd

 

flex-basis

Określa początkowy rozmiar elementu. Domyślna wartość to „auto”. Czym tak właściwie różni się od właściwości „width”? Otóż tym, że „flex-basis”  działa jako”width” tylko jeśli właściwość „flex-direction” kontenera ma wartość „row” lub „row-reverse”. Natomiast jeśli „flex-direction” ma wartość „column” lub „column-reverse” to „flex-basis” działa jako „height”.

https://codepen.io/morawcik/pen/PmQKPx

 

https://codepen.io/morawcik/pen/QvQMQb

 

flex

Jest to skrócony zapis właściwości „flex-grow”, „flex-shrink” i „flex-basis” i domyślna wartość to „0 1 auto” („0” dla „flex-grow”, „1” dla ‚flex-shrink” i „0” dla „flex-basis”

 

align-self

Ta własność nadpisuje właściwość „align-items” dla danego elementu – np. jeśli „align-items” ma wartość „flex-start” a chcemy by element „3” był położony na końcu osi „cross axis”

https://codepen.io/morawcik/pen/YVexOR

 

I to by było na tyle. Jeśli macie jakieś pytania, coś jest nie jasne lub nie możecie sobie poradzić z flexboxem to piszcie śmiało 🙂


Post 4 z 4 z serii Flexbox
  • Trochę czasu już siedzę w JS i ogólnie w „webie”, ale przyznam, że jeszcze mam sporo do nadrobienia w zakresie samego HTML/CSS, w tym również flex (obecnie stosowałem „tradycyjne” float, clear itp.). Dzięki za bardzo dobrą serię artykułów – przeczytałem dokładnie wszystkie 4 i z chęcią będę zaglądał na Twojego bloga częściej aby douczyć się co nie co z CSS 🙂 Pozdrawiam!

    • Miło mi, że się przydało i spodobało 🙂 Jeśli chciałbyś poczytać o jakimś konkretnym zagadnieniu to pisz śmiało – pomimo swojej „listy tematów” jestem otwarty na potrzeby innych 😉

  • Peter Pawlizza

    Witam
    Jestem na samym początku nauki HTML/CSS i w ogóle nauki kodowania, więc proszę wybaczyć jeżeli zadam banalne pytanie 🙂
    Chodzi mi o skrót flex. Wg mojej logiki zapis flex: 0 0; powinien pozostawić flex-grow bez zmian, a flex-shrink ustawić, aby element się nie zwężał, przy zwijaniu. Niestety bez wpisanej wartości flex-basis, element się kurczy do .. pewnie wielkości czcionki.
    Czy tak się po prostu dzieje, czy ja czegoś nie rozumiem? 🙂
    PS Świetne lekcje flexa. Bardzo szybko sobie to wszystko poukładałem w głowie. Na pewno skorzystam z innych Pana artykułów, jeżeli będę czegoś potrzebował.
    Pozdrawiam

    • Dzięki za zwrócenie uwagi. przy zapisie flex: 0 0 flex-basis przyjmuje wartość 0 a nie auto jak napisałem w poście (dziwna logika – ten sam styl w dwóch miejscach ma inną wartość domyślną :D)

      Super jak się podobają. Mam nadzieję, że jeszcze nie jeden artykuł Ci się przyda (pomimo, że ostatnio zmniejszyłem tempo 🙁 )

      PS Proszę bez „Pan” – staro się czuję 😉