CSS Flex kontejner
Nadřazený prvek (kontejner)
Jak jsme specifikovali v předchozí kapitole, jedná se o flex kontejner (modrá oblast) se třemi flex položkami :
1
2
3
Flex kontejner se stane flexibilním nastavením displayvlastnosti na
flex:
Příklad
.flex-container {
display: flex;
}
Vlastnosti flex kontejneru jsou:
Vlastnost flex-directional
Vlastnost flex-directiondefinuje, kterým směrem chce kontejner stohovat flexibilní položky.
1
2
3
Příklad
Hodnota columnnaskládá flexibilní položky svisle (shora dolů):
.flex-container {
display: flex;
flex-direction: column;
}
Příklad
Hodnota column-reverseukládá flexibilní položky svisle (ale zdola nahoru):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Příklad
Hodnota rownaskládá flexibilní položky vodorovně (zleva doprava):
.flex-container {
display: flex;
flex-direction: row;
}
Příklad
Hodnota row-reversenaskládá flexibilní položky vodorovně (ale zprava doleva):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Vlastnost flex-wrap
Tato flex-wrapvlastnost určuje, zda se mají ohebné položky zabalit nebo ne.
Níže uvedené příklady mají 12 flexibilních položek, aby byla
flex-wrapvlastnost lépe demonstrována.
1
2
3
4
5
6
7
8
9
10
11
12
Příklad
Hodnota wrapurčuje, že se flexibilní položky v případě potřeby zabalí:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Příklad
Hodnota nowrapurčuje, že se flexibilní položky nebudou zalamovat (toto je výchozí):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Příklad
Hodnota wrap-reverseurčuje, že flexibilní položky se v případě potřeby zabalí v opačném pořadí:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Vlastnost flex-flow
Vlastnost flex-flowje zkrácená vlastnost pro nastavení vlastností
flex-directiona
flex-wrap.
Příklad
.flex-container {
display: flex;
flex-flow: row wrap;
}
Vlastnost justify-content
Vlastnost justify-contentse používá k zarovnání flexibilních položek:
1
2
3
Příklad
Hodnota centerzarovná flexibilní položky na střed kontejneru:
.flex-container {
display: flex;
justify-content: center;
}
Příklad
Hodnota flex-startzarovná flexibilní položky na začátku kontejneru (toto je výchozí):
.flex-container {
display: flex;
justify-content: flex-start;
}
Příklad
Hodnota flex-endzarovná flexibilní položky na konci kontejneru:
.flex-container {
display: flex;
justify-content: flex-end;
}
Příklad
Hodnota space-aroundzobrazí flexibilní položky s mezerou před, mezi a za řádky:
.flex-container {
display: flex;
justify-content: space-around;
}
Příklad
Hodnota space-betweenzobrazí flexibilní položky s mezerou mezi řádky:
.flex-container {
display: flex;
justify-content: space-between;
}
Vlastnost zarovnat položky
Vlastnost align-itemsse používá k zarovnání flexibilních položek.
1
2
3
V těchto příkladech používáme kontejner o výšce 200 pixelů, abychom lépe demonstrovali
align-itemsvlastnost.
Příklad
Hodnota centerzarovná flexibilní položky uprostřed kontejneru:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Příklad
Hodnota flex-startzarovná flexibilní položky v horní části kontejneru:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Příklad
Hodnota flex-endzarovná flexibilní položky ve spodní části kontejneru:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Příklad
Hodnota stretchroztáhne flexibilní položky tak, aby naplnily kontejner (toto je výchozí):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Příklad
Hodnota baselinezarovná flexibilní položky, například jejich základní linie:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Poznámka: V příkladu je použita odlišná velikost písma, která demonstruje, že položky jsou zarovnány podle účaří textu:
1
2
3
Vlastnost align-content
Vlastnost align-contentse používá k zarovnání ohybových čar.
1
2
3
4
5
6
7
8
9
10
11
12
V těchto příkladech používáme kontejner o výšce 600 pixelů s
flex-wrapvlastností nastavenou na wrap, abychom tuto vlastnost lépe demonstrovali align-content.
Příklad
Hodnota space-betweenzobrazuje ohybové čáry se stejnou mezerou mezi nimi:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Příklad
Hodnota space-aroundzobrazí ohybové čáry s mezerou před, mezi a za nimi:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Příklad
Hodnota stretchroztáhne ohybové čáry, aby zabraly zbývající místo (toto je výchozí):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Příklad
Zobrazení centerhodnot zobrazí ohybové čáry uprostřed kontejneru:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Příklad
Hodnota flex-startzobrazuje ohybové čáry na začátku kontejneru:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Příklad
Hodnota flex-endzobrazuje ohybové čáry na konci kontejneru:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfektní centrování
V následujícím příkladu vyřešíme velmi běžný problém se stylem: dokonalé vystředění.
ŘEŠENÍ: Nastavte vlastnosti a na
justify-contenthodnotu a položka flex bude dokonale vycentrována:align-itemscenter
Příklad
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Vlastnosti kontejneru CSS Flexbox
V následující tabulce jsou uvedeny všechny vlastnosti CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |