Položky CSS Flex
Podřízené prvky (položky)
Přímé podřízené prvky flex kontejneru se automaticky stanou flexibilními (flex) položkami.
1
2
3
4
Výše uvedený prvek představuje čtyři modré ohebné položky uvnitř šedého ohebného kontejneru.
Příklad
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Vlastnosti flexibilní položky jsou:
Zakázka Nemovitost
Vlastnost order
určuje pořadí flexibilních položek.
1
2
3
4
První flexibilní položka v kódu se nemusí objevit jako první položka v rozvržení.
Hodnota objednávky musí být číslo, výchozí hodnota je 0.
Příklad
Vlastnost objednávky může změnit pořadí flexibilních položek:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Flex-grow Property
Tato flex-grow
vlastnost určuje, o kolik flexibilní položka poroste vzhledem ke zbytku flexibilních položek.
1
2
3
Hodnota musí být číslo, výchozí hodnota je 0.
Příklad
Nechte třetí flexibilní položku růst osmkrát rychleji než ostatní flexibilní položky:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Flex-shrink Property
Tato flex-shrink
vlastnost určuje, jak moc se ohebná položka zmenší vzhledem ke zbytku ohebných položek.
1
2
3
4
5
6
7
8
9
10
Hodnota musí být číslo, výchozí hodnota je 1.
Příklad
Nedovolte, aby se třetí ohebná položka srazila tolik jako ostatní flexibilní položky:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Flexibilní vlastnost
Vlastnost flex-basis
určuje počáteční délku flexibilní položky.
1
2
3
4
Příklad
Nastavte počáteční délku třetí flexibilní položky na 200 pixelů:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Objekt flex
Vlastnost flex
je zkrácená vlastnost pro vlastnosti
flex-grow
, flex-shrink
, a flex-basis
.
Příklad
Zajistěte, aby třetí flexibilní položka nebyla pěstovatelná (0), nesmrštitelná (0) a s počáteční délkou 200 pixelů:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Vlastnost align-self
Vlastnost align-self
určuje zarovnání pro vybranou položku uvnitř flexibilního kontejneru.
Vlastnost align-self
přepíše výchozí zarovnání nastavené vlastností kontejneru align-items
.
1
2
3
4
V těchto příkladech používáme kontejner o výšce 200 pixelů, abychom lépe demonstrovali
align-self
vlastnost:
Příklad
Zarovnejte třetí ohebný předmět na střed nádoby:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Příklad
Zarovnejte druhou ohebnou položku v horní části nádoby a třetí ohebnou položku ve spodní části nádoby:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Vlastnosti položek CSS Flexbox
V následující tabulce jsou uvedeny všechny vlastnosti CSS Flexbox Items:
Property | Description |
---|---|
align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
flex-basis | Specifies the initial length of a flex item |
flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
order | Specifies the order of the flex items inside the same container |