Be flexible

Cześć!

Dzisiaj dla odmiany na tapecie CSS. Stwierdziłem ostatnio, że koniecznie muszę usystematyzować to, co wiem na temat flexboxa.
Tak więc oto przed Państwem: interaktywna prezentacja podstawowych właściwości właśnie z flexboxem związanych.

Kolejność i orientacja


flex-direction – określa jak elementy mają być rozmieszczone wewnątrz kontenera “flex”, przez ustawienie kierunku osi głównej.

flex-direction: row / row-reverse – oś główna zostaje ustawiona w poziomie, w kierunku zgodnym lub przeciwnym do aktualnego trybu pisania.

1
2
3
4
5

flex-direction: column / column-reverse – oś główna zostaje ustawiona w pionie, w kierunku zgodnym lub przeciwnym do aktualnego trybu pisania.

1
2
3
4
5


flex-wrap – określa czy kontener jest jedno czy wielo -wierszowy i/lub kierunek osi poprzecznej.

flex-wrap: wrap / wrap-reverse – kontener wielowierszowy / wielowierszowy z odwróconą kolejnością wierszy.

1
2
3
4
5

flex-wrap: no-wrap – kontener jednowierszowy

1
2
3
4
5


flex-flow – skrócony zapis właściwości flex-direction + flex-wrap np. flex-flow: column-reverse wrap.

1
2
3
4
5


Dla elementu dziecka znajdującego się wewnątrz kontenera flex, mamy możliwość ustawienia parametru:
order – określa przynależność elementu dziecka do grup sortowania. Poniżej bloki z numerem 2 i 3 zostały przypisane do grupy przez ustawienie “order:1”.

1
2
3
4
5

Rozmieszczenie


justyfy-content – określa rozłożenie elementów wewnątrz rodzica, wzdłuż głównej osi.

justyfy-content: flex-start – elementy są rozłożone wzdłuż osi głównej, od jej początku.

1
2
3
4
5

justyfy-content: flex-end – elementy są rozłożone wzdłuż osi głównej, na jej końcu.

1
2
3
4
5

justyfy-content: center – elementy są rozłożone wzdłuż osi głównej, na jej środku.

1
2
3
4
5

justyfy-content: space-between – elementy są rozłożone równo wzdłuż osi głównej. Pierwszy na jej początku, ostatni na końcu.

1
2
3
4
5

justyfy-content: space-around – elementy są rozłożone równo wzdłuż osi głównej, z zachowaniem wolnej przestrzeni po obu stronach każdego elementu.

1
2
3
4
5


align-items – określa rozłożenie elementów wewnątrz rodzica, wzdłuż osi poprzecznej.

align-items: flex-start – elementy są rozłożone na osi poprzecznej, na jej początku

1
2
3
4
5

align-items: flex-end – elementy są rozłożone na osi poprzecznej, na jej końcu

1
2
3
4
5

align-items: center – elementy są rozłożone na osi poprzecznej, na jej środku

1
2
3
4
5

align-items: baseline – elementy są rozłożone na osi poprzecznej, tak jak wskazuje ich linia bazowa (ang. baseline)

1
2
3
4
5

align-items: stretch – jeżeli elementy wewnątrz kontenera nie posiadają określonej wysokości, to zostaną rozciągnięte to wysokości kontenera.

1
2
3
4
5


align-content – działa analogicznie jak justify-content. Rozmieszcza poszczególne wiersze zawartości kontenera wzdłuż osi poprzecznej. Dotyczy tylko kontenerów wielowierszowych.

align-content: flex-start – rozmieszcza wiersze na początku osi poprzecznej.

1
2
3
4
5

align-content: flex-end – rozmieszcza wiersze na końcu osi poprzecznej.

1
2
3
4
5

align-content: center – rozmieszcza wiersze na środku osi poprzecznej.

1
2
3
4
5

align-content: space-between – rozmieszcza wiersze na osi poprzecznej w równej odległości od siebie.

1
2
3
4
5

align-content: space-around – rozmieszcza wiersze na osi poprzecznej w równej odległości od siebie, z zachowaniem wolnej przestrzeni po obu stronach każdego elementu.

1
2
3
4
5

align-content: stretch – jeżeli elementy wewnątrz kontenera nie posiadają określonej wysokości, to zostaną rozciągnięte to wysokości wiersza.

1
2
3
4
5


Dla elementu dziecka znajdującego się wewnątrz kontenera flex, mamy możliwość ustawienia parametru:
align-self – pozwala na nadpisanie właściwości align-items dla poszczególnych elementów wewnątrz kontenera flex.

align-self: flex-start – 1. powoduje przyciągnięcie elementu na początek osi poprzecznej.
align-self: flex-end- 2. ustawia obiekt na koniec osi poprzecznej.
align-self: center – 3. centruje element na osi poprzecznej.
align-self: baseline – 4. ustawia obiekt zgodnie z jego linią bazową (baseline).
align-self: stretch – 5. powoduje rozciągnięcie elementu wzdłuż osi poprzecznej.

1
2
3
4
5

Elastyczność


Poniższe właściwości dotyczą obiektów dzieci, znajdujących się wewnątrz kontenera flex.

flex-grow – pozwala na ustawienie “grow factor”. Wpływa na stopień rozszerzania się elementu.

1
2
3
4
5

flex-shrink – ustawia “shrink faktor” obiektu. Wpływa na stopnień kurczenia się obiektu.

1
2
3
4
5

flex-basis – określa początkową wielkość obiektu. Przyjmuje wartości takie jak właściwość “width”, np: 30%, 100px.

1
2
3
4
5

Podsumowanie


Aktualnie w świecie front-endu znajomość flexboxa jest konieczna. Mam świadomość, że nie wyjaśniłem tutaj w zasadzie jak flexbox działa, a jedynie zaprezentowałem co można z jego pomocą osiągnąć.
Tym nie mniej, mam nadzieję, że takie zestawienie będzie dla kogoś pomocne a na dzisiaj to tyle!

Podziel się:

Leave a Reply

Your email address will not be published. Required fields are marked *