VSC + HTML + CSS
Vlastnosti flexboxu
Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku, nebo položek.
Hodnota vlastnosti display: flex nastaví prvku formátovací kontext flexboxu. Jeho přímí potomci mají vlastnosti nastavené v kontejneru.
flex-wrap
Flex-wrap - určuje zalamování položek v případě nedostatku místa
Hodnoty
nowrap - položky se nezalamují (Defaultní nastavení)
wrap - položky se zalamují
wrap-reverse - reverzní zalamování položek
initial - stejné jako Defaultní nastavení
inherit - dle nastavení rodiče
Příklad: flex-wrap: wrap-reverse;
1
2
3
4
flex-direction
flex-direction určuje směr toku rozvržení (vedle sebe, pod sebe)
Hodnoty
row - vedle sebe (default)
row-reverse - vedle sebe reverzně
column - pod sebe
column-reverse - pod sebe reverzně
initial - dle nastavení default
inherit - dle rodiče
Příklad: display: flex; | flex-wrap: wrap; | flex-direction: column;
1
2
3
4
V případě, že je nedostatek výšky, skládají se boxy vedle sebe
flex-flow
flex-flow - zkratka pro flex-wrap a flex-direction.
Příklad: flex-flow: wrap column - položky se zalamují a skládají se pod sebe
Jelikož se jedná o zkrácený výraz může nabývat hodnot shora uvedených
Zarovnání boxů
V rodičovském kontejneru lze také určit zarovnání boxů (potomků)
gap - mezera mezi boxy
align-items - zarovnání na blokové ose (bvykle svislé)
CSS align-items (w3schools.com)
Hodnoty
normal - zleva do prava (default)
stretch - pružně
center - vycentrované
flex-start - nahoře vlevo
flex-end - dole vlevo
start - dle individuálního nastavení od začátku
end - dle individuálního nastaven od konce
baseline - rovnoměrně
initial - dle default nastavení
inherit - jako rodiče
CSS align-items (w3schools.com)
align-content
align-content - zarovnání více řádků boxů na blokové ose (svislé)
Hodnoty
normal - zleva do prava (default)
stretch - pružně
center - vycentrované
flex-start - nahoře vlevo
flex-end - dole vlevo
start - dle individuálního nastavení od začátku
end - dle individuální nastaven od konce
space-between - rovnoměrně mezi řádky
space-around - rovnoměrně kolem řádků
space-evenly - rovnoměrně mezi i kolem řádků
initial - dle default nastavení
inherit - jako rodiče
Flex
flex - zkratka pro nastavení tří vlastností položky: flex-grow, flex-shrink a flex-basis
Hodnoty
flex-grow - určuje schopnost položky růst v rámci dostupného prostoru
flex-shrink - určuje schopnost položky zmenšovat se v rámci dostupného prostoru
flex-basis - určuje výchozí velikost položky před tím, než začne růst nebo se zmenšovat (šířka)
.child {flex: 1 1 18vw; /* Flex-grow, flex-shrink, flex-basis */}
Příklad flex: 1 1 18vw
Pomocí malé šipky v pravém spodním rohu lze měnit velkost boxu.
justify-content
justify-content - zarovnání na hlavní ose (obvykle vodorovné)
Hodnoty
flex-start - zarovnání na začátek (default)
flex-end - zarovnání na konec
center - vycentrované
space-between - rovnoměrně mezi položkami
space-around - rovnoměrně kolem položek
space-evenly - rovnoměrně mezi i kolem položek
Příklad
justify-content: center;
Příklad
justify-content: parent-between center;
Příklad
justify-content: space-evenly;
Příklad
justify-content: space-around;
Více informací
CSS justify-content (w3schools.com)HTML kousky
width:calc()
Menu
Barvy u zátržítek a boxů
Accordion
Hodiny
Single page
Pricing card
Fluid Layout with Flex
Vlastnosti flexboxu
Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku, nebo položek.
Hodnota vlastnosti display: flex nastaví prvku formátovací kontext flexboxu. Jeho přímí potomci mají vlastnosti nastavené v kontejneru.
flex-wrap
Flex-wrap - určuje zalamování položek v případě nedostatku místa
Hodnoty
nowrap - položky se nezalamují (Defaultní nastavení)
wrap - položky se zalamují
wrap-reverse - reverzní zalamování položek
initial - stejné jako Defaultní nastavení
inherit - dle nastavení rodiče
Příklad: flex-wrap: wrap-reverse;
1
2
3
4
flex-direction
flex-direction určuje směr toku rozvržení (vedle sebe, pod sebe)
Hodnoty
row - vedle sebe (default)
row-reverse - vedle sebe reverzně
column - pod sebe
column-reverse - pod sebe reverzně
initial - dle nastavení default
inherit - dle rodiče
Příklad: display: flex; | flex-wrap: wrap; | flex-direction: column;
1
2
3
4
V případě, že je nedostatek výšky, skládají se boxy vedle sebe
flex-flow
flex-flow - zkratka pro flex-wrap a flex-direction.
Příklad: flex-flow: wrap column - položky se zalamují a skládají se pod sebe
Jelikož se jedná o zkrácený výraz může nabývat hodnot shora uvedených
Zarovnání boxů
V rodičovském kontejneru lze také určit zarovnání boxů (potomků)
gap - mezera mezi boxy
align-items - zarovnání na blokové ose (bvykle svislé)
CSS align-items (w3schools.com)
Hodnoty
normal - zleva do prava (default)
stretch - pružně
center - vycentrované
flex-start - nahoře vlevo
flex-end - dole vlevo
start - dle individuálního nastavení od začátku
end - dle individuálního nastaven od konce
baseline - rovnoměrně
initial - dle default nastavení
inherit - jako rodiče
CSS align-items (w3schools.com)
align-content
align-content - zarovnání více řádků boxů na blokové ose (svislé)
Hodnoty
normal - zleva do prava (default)
stretch - pružně
center - vycentrované
flex-start - nahoře vlevo
flex-end - dole vlevo
start - dle individuálního nastavení od začátku
end - dle individuální nastaven od konce
space-between - rovnoměrně mezi řádky
space-around - rovnoměrně kolem řádků
space-evenly - rovnoměrně mezi i kolem řádků
initial - dle default nastavení
inherit - jako rodiče
Flex
flex - zkratka pro nastavení tří vlastností položky: flex-grow, flex-shrink a flex-basis
Hodnoty
flex-grow - určuje schopnost položky růst v rámci dostupného prostoru
flex-shrink - určuje schopnost položky zmenšovat se v rámci dostupného prostoru
flex-basis - určuje výchozí velikost položky před tím, než začne růst nebo se zmenšovat (šířka)
.child {flex: 1 1 18vw; /* Flex-grow, flex-shrink, flex-basis */}
Příklad flex: 1 1 18vw
Pomocí malé šipky v pravém spodním rohu lze měnit velkost boxu.
justify-content
justify-content - zarovnání na hlavní ose (obvykle vodorovné)
Hodnoty
flex-start - zarovnání na začátek (default)
flex-end - zarovnání na konec
center - vycentrované
space-between - rovnoměrně mezi položkami
space-around - rovnoměrně kolem položek
space-evenly - rovnoměrně mezi i kolem položek
Příklad
justify-content: center;
Příklad
justify-content: parent-between center;
Příklad
justify-content: space-evenly;
Příklad
justify-content: space-around;