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
|
1 2 3 |
.flex3 { order: -1; } |
https://codepen.io/morawcik/pen/RVQVMW
A jeśli chcemy dodatkowo by element „2” był ostatni:
|
1 2 3 |
.flex2 { order: 1; } |
https://codepen.io/morawcik/pen/MmQmNP
Dla przykładu zmieńmy teraz element „1” aby był ostatni a „2” tym samym będzie przedostatni
|
1 2 3 4 5 6 7 |
.flex1 { order: 2; } .flex2 { order: 1; } |
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.
|
1 2 3 4 5 6 7 |
.flex1 { flex-grow: 1; } .flex2 { flex-grow: 1; } |
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.
|
1 2 3 4 5 6 7 |
.flex1 { flex-grow: 1; } .flex2 { flex-grow: 2; } |
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.
|
1 2 3 |
.flex1 { flex-shrink: 0; } |
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”.
|
1 2 3 4 5 6 7 8 |
section { flex-direction: row; } .flex1 { flex-basis: 200px; } |
https://codepen.io/morawcik/pen/PmQKPx
|
1 2 3 4 5 6 7 8 |
section { flex-direction: column; } .flex1 { flex-basis: 200px; } |
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”
|
1 |
flex: <flex-grow> <flex-shrink> <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”
|
1 2 3 4 5 6 7 8 |
section { align-items: flex-start; } .flex3 { align-self: flex-end; } |
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 🙂
- Flexbox – część pierwsza
- Flexbox – część druga
- Flexbox – część trzecia
- Flexbox – część czwarta