CSS Flexbox
1
2
3
4
5
6
7
8
Modul rozložení CSS Flexbox
Před modulem Flexbox Layout existovaly čtyři režimy rozložení:
- Blokovat pro sekce na webové stránce
- Inline, pro text
- Tabulka, pro data dvourozměrné tabulky
- Umístěný, pro explicitní umístění prvku
Flexibilní modul rozvržení krabice usnadňuje navrhování flexibilní struktury rozvržení, která reagují, bez použití plovoucího nebo polohování.
Podpora prohlížeče
Vlastnosti flexboxu jsou podporovány ve všech moderních prohlížečích.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Prvky Flexbox
Chcete-li začít používat model Flexbox, musíte nejprve definovat kontejner Flex.
1
2
3
Prvek výše představuje flex kontejner (modrá oblast) se třemi flex položkami.
Příklad
Flex nádoba se třemi flexibilními položkami:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Více o flex kontejnerech a flex položkách se dozvíte v dalších kapitolách.