Zarovnání krabic s css pomocí flex kontejneru. Vše, co potřebujete vědět o položkách Flexbox Alignment Flex

Modul značkování Flexbox ( z angličtiny Flexible Box - flexibilní blok), která je v současné době ve fázi „ Možné doporučení»standardizace W3C ( Doporučení kandidáta W3C) si klade za cíl poskytnout efektivnější způsob, jak označit, zarovnat a distribuovat prostor mezi prvky v kontejneru, i když je jejich velikost neznámá a/nebo určená dynamicky ( proto se tomu říkalo "flexibilní").

Hlavní myšlenkou flexibilního rozvržení je dát kontejneru možnost měnit výšku/šířku (a pořadí) jeho prvků tak, aby optimálně zaplnily dostupný prostor ( hlavně pro podporu všech druhů a velikostí obrazovek).

Flexibilní kontejner natahuje položky, aby vyplnil volný prostor, nebo zmenšuje položky, aby se zabránilo jejich překročení.

Nejdůležitější je, že rozložení Flexboxu je na rozdíl od běžných rozložení ( bloky, které jsou orientovány svisle a vložené prvky, které jsou vodorovně).

Zatímco běžné značkovací prvky fungují pro stránky dobře, postrádají flexibilitu ( a to není hra se slovy) pro podporu velkých a složitých aplikací ( zejména pokud jde o změnu orientace, rozměrů, roztahování, smršťování a tak dále).

Poznámka: Označení Flexbox se nejlépe hodí pro součásti aplikací a malá rozvržení, zatímco značkování založené na mřížce se nejlépe hodí pro rozvržení ve velkém měřítku.

Základní pojmy a pojmy

Protože Flexbox je celý modul a ne samostatná vlastnost, obsahuje mnoho prvků, včetně celé sady vlastností. Některé z nich jsou určeny k aplikaci na nádobu ( rodičovský prvek známý jako flex kontejner), zatímco jiné by se měly vztahovat na děti ( říkejme jim flexibilní položky).

Zatímco konvenční značení je založeno na směrech krabic a inline, flexibilní značení je založeno na směrech flexibilního toku. Podívejte se prosím na níže uvedený diagram ze specifikace, který vysvětluje základní myšlenku flex značení:

V zásadě budou prvky umístěny buď podél hlavní osy ( od bodu main-start do main-end), nebo podél příčné osy ( od křížového počátečního bodu k křížovému konci):

hlavní osa je hlavní osa ohebného kontejneru, podél které jsou rozmístěny ohebné předměty. Pozor, nemusí být vodorovný, jeho poloha závisí na vlastnosti flex-direction (viz níže);
hlavní start | main-end - flex položky jsou umístěny uvnitř kontejneru, počínaje hlavním počátečním bodem a dosahujícím hlavního koncového bodu;
hlavní velikost je šířka nebo výška flexibilní položky v závislosti na hlavní velikosti. Vlastnost main size může být nastavena na šířku nebo výšku;
křížová osa - křížová osa kolmá na hlavní osu. Jeho směr závisí na směru hlavní osy.
křížový start | křížový konec - ohebné linky jsou naplněny předměty a umístěny do kontejneru, počínaje od příčné počáteční strany směrem k příčné koncové straně;
velikost kříže - šířka nebo výška flex položky v závislosti na zvoleném rozměru. Vlastnost může mít hodnotu šířky nebo výšky příčného rozměru.

Vlastnosti nadřazené třídy (flex kontejner)

Zobrazit

Tato vlastnost definuje flexibilní kontejner: vložený nebo blokový, v závislosti na nastavené hodnotě. Umožňuje také flexibilní kontext pro všechny jeho přímé potomky:

Kontejner (displej: flex; / * nebo inline-flex * /)

Všimněte si, že sloupce CSS nemají v kontejneru Flex žádný vliv.

flex-direction

Tato vlastnost nastavuje hlavní osu, která určuje směr, ve kterém jsou ohebné položky rozmístěny v ohebném kontejneru. Flexbox ( s výjimkou volitelného balení) je koncept jednosměrného značkování.

Imagine flex položky jsou primárně umístěny buď v horizontálních nebo vertikálních sloupcích:

Kontejner (flex-směr: řádek | řádek-obrácený | sloupec | sloupec-obrácený;)

řádek (výchozí): zleva doprava pro ltr; zprava doleva pro rtl;
řada-zpět: zprava doleva pro v ltr; zleva doprava pro rtl;
sloupec: stejný jako řádek, ale shora dolů;
sloupec-obrácený: stejné jako řádek-obrácený, ale zdola nahoru.

flex-wrap

Ve výchozím nastavení se flexibilní položky pokusí vtěsnat do jednoho řádku. Můžete to změnit a pomocí této vlastnosti zabalit prvky podle potřeby. Svou roli zde hraje i směr, kterým jsou nové linky umístěny:

Nádoba (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (výchozí): jeden řádek / zleva doprava pro ltr; zprava doleva pro rtl;
wrap: multiline / zleva doprava pro ltr; zprava doleva pro rtl;
wrap-reverse: multiline / zprava doleva pro ltr; zleva doprava pro rtl.

flex-flow (platí pro rodiče flex nádoby)

Toto je zkrácená forma vlastností flex-direction a flex-wrap, které společně definují hlavní a příčnou osu flex nádoby. Výchozí hodnota je řádek nowrap:

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

ospravedlnit-obsah

Tato vlastnost nastavuje zarovnání podél hlavní osy. To pomáhá přidělit přebytečný volný prostor, když jsou všechny flexibilní položky v řadě nepružné nebo flexibilní, ale dosáhly své maximální velikosti. Tato vlastnost vám také umožňuje získat kontrolu nad zarovnáním prvků, když překročí hranice čáry:

Kontejner (zarovnat-obsah: flex-start | flex-end | střed | mezera-mezi | mezera-kolem;)

flex-start (výchozí): položky jsou zarovnány na začátek řádku;
ohebný konec: položky jsou zarovnány na konec řádku
střed: položky jsou zarovnány na střed řádku;
mezera mezi: prvky jsou rovnoměrně rozmístěny v řádku: první prvek je umístěn na začátku řádku, poslední - na konci;
mezera kolem: položky jsou rovnoměrně rozmístěny na řádku se stejným rozestupem.

zarovnat-položky

Tato vlastnost určuje, jak jsou ohebné položky ve výchozím nastavení umístěny ve vztahu k příčné ose na aktuálním řádku. Lze si to představit jako verzi pro zdůvodnění obsahu napříč osami ( kolmo na hlavní):

Kontejner (zarovnání položek: flex-start | flex-end | center | baseline | stretch;)

flex-start: hranice položek cross-start je na linii cross-start;
flex-end: hranice položek křížového začátku je na linii křížového konce;
střed: položky jsou vystředěny na příčnou osu;
základní linie: prvky jsou zarovnány podle základní linie;
roztáhnout (výchozí): prvky se roztáhnou, aby zaplnily kontejner ( s ohledem na hodnoty minimální/maximální šířky).

zarovnat-obsah

Tato vlastnost umožňuje zarovnání čar v flex kontejneru, když je na příčné ose volné místo, podobně jako vlastnost justify-content zarovnává jednotlivé položky k hlavní ose.

Poznámka: Tato vlastnost nebude fungovat, pokud existuje pouze jeden řádek flexibilních položek:

flex-start: linky jsou umístěny na začátku kontejneru;
ohebný konec: linky jsou umístěny na konci nádoby;
střed: čáry jsou umístěny uprostřed nádoby;
mezera mezi: řádky jsou rozmístěny rovnoměrně; první řádek je na začátku kontejneru a poslední je na konci;
mezera kolem: čáry jsou rozmístěny rovnoměrně ve stejné vzdálenosti od sebe;
roztáhnout (výchozí): Čáry se roztáhnou, aby vyplnily zbývající prostor.

Vlastnosti dítěte

(flex položky)

Objednat

Ve výchozím nastavení jsou flexibilní položky uspořádány ve zdrojovém pořadí. Vlastnost order však řídí pořadí, ve kterém se položky objeví v kontejneru Flex:

Položka (objednávka: ; }

flex-grow

Tato vlastnost umožňuje flexibilní položce "růst" podle potřeby. Nabývá bezrozměrné hodnoty, která slouží jako proporce. Tato hodnota určuje, kolik z dostupného prostoru uvnitř flexibilního kontejneru může položka zabírat.

Pokud mají všechny položky flex-grow nastaveno na 1, pak bude každá podřízená položka nastavena na stejnou velikost v kontejneru. Pokud nastavíte jedno z dětí na 2, zabere dvakrát tolik místa než ostatní:

Položka (flex-grow: ; / * výchozí 0 * /)

flex-shrink

Tato vlastnost způsobí, že se ohebné položky zmenšují podle potřeby:

Položka (flex-shrink: ; / * výchozí 1 * /)

Záporná čísla nejsou povolena.

flex-base

Tato vlastnost určuje výchozí velikost prvků před přidělením zbývajícího prostoru:

Položka (flex-base: | auto; / * výchozí nastavení auto * /)

flex

Tato vlastnost je zkratkou pro kombinaci flex-grow, flex-shrink a flex-base. Druhý a třetí parametr (flex-shrink a flex-base) jsou volitelné. Výchozí hodnoty: 0 1 auto:

Položka (flex: žádná | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

sladit-sebe

Tato vlastnost vám umožňuje přepsat výchozí zarovnání ( nebo definované vlastností align-items) pro jednotlivé flexibilní položky.

Dostupné hodnoty naleznete v popisu vlastnosti align-items:

Všimněte si, že float, clear a vertical-align nefungují s pružnými prvky.

Příklady

Začněme velmi jednoduchým příkladem, řešícím téměř každodenní problém: dokonalé vyrovnání středu. Použití flexboxu už nemůže být jednodušší:

Rodič (displej: flex; výška: 300px; / * Nebo cokoliv * /) .child (šířka: 100px; / * Nebo cokoliv * / výška: 100px; / * Nebo cokoli * / okraj: auto; / * Magic ! * / )

Tento příklad je založen na skutečnosti, že vlastnost margin nastavená na auto zabírá místo navíc. Proto toto nastavení odsazení zarovná prvek přesně na střed obou os.

Nyní použijeme několik dalších vlastností. Předpokládejme, že máme seznam 6 prvků, všechny mají pevnou velikost ( pro estetiku), ale s možností automatického vyplňování.

Chceme, aby byly pěkné, rovnoměrně rozmístěné podél vodorovné osy, aby při změně velikosti okna prohlížeče vše vypadalo dobře ( bez použití mediálních dotazů):

Flex-container (/ * Nejprve vytvořte kontext rozvržení Flex * / display: flex; / * Poté definujte směr toku a zda chceme, aby byly položky zabaleny. * Pamatujte, že je to stejné jako: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * Nyní definujeme, jak alokovat zbývající prostor * / justify-content: space-around;)

Připraveno! Vše ostatní je již otázkou designu. Zde je ukázka tohoto příkladu. Postupujte podle odkazu a zkuste změnit velikost okna, abyste viděli, co se stane:

HTML:

CSS:

Flex-container (výplň: 0; okraj: 0; styl seznamu: žádný; displej: -webkit-box; displej: -moz-box; displej: -ms-flexbox; displej: -webkit-flex; displej: flex; -webkit-flex-flow: obtékání řádku; justify-content: mezerník;). flex-item (pozadí: rajče; odsazení: 5px; šířka: 200px; výška: 150px; horní okraj: 10px; výška řádku: 150px; barva: bílá; váha písma: tučné; velikost písma: 3 em; zarovnání textu: na střed;)

Zkusme ještě jednu věc. Řekněme, že máme vpravo zarovnanou navigační nabídku úplně nahoře na našem webu, ale chceme, aby byla vycentrovaná na středně velké obrazovky a jeden sloupec na malých zařízeních. Všechno je docela jednoduché:

CSS:

/ * Velké obrazovky * / .navigace (zobrazení: flex; flex-flow: obtékání řádku; / * Zarovnat položky na konec řádku podél hlavní osy * / justify-content: flex-end;) / * Střední obrazovky * / @media all and (max-width: 800px) (.navigation (/ * U středních obrazovek vycentrujeme prvky rovnoměrně a rozdělujeme mezi ně volný prostor * / justify-content: space-around;)) / * Malé obrazovky * / @media all and (max-width: 500px) (.navigation (/ * U malých obrazovek používáme po sloupcích spíše než po řádcích * / flex-direction: sloupec;))

HTML:

CSS:

Navigace (styl seznamu: žádný; okraj: 0; pozadí: tmavě modré; displej: -webkit-box; displej: -moz-box; displej: -ms-flexbox; displej: -webkit-flex; displej: flex; -webkit -flex-flow: obtékání řádku; justify-content: flex-end;) .navigation a (text-decoration: none; display: block; padding: 1em; color: white;) .navigation a: hover (pozadí: ztmavení ( deepskyblue, 2 %);) @media all and (max-width: 800px) (.navigation (justify-content: space-around;)) @media all and (max-width: 600px) (.navigation (-webkit- flex-flow: obtékání sloupců; flex-flow: obtékání sloupců; padding: 0;). Navigace a (zarovnání textu: na střed; odsazení: 10px; border-top: 1px solid rgba (255,255,255,0,3); border-bottom: 1px solid rgba (0,0,0,0,1);). Navigace li: poslední z typu a (ohraničení dole: žádné;))

Zkusme to ještě lépe, když si pohrajeme s „flexibilitou“ flex položek. Co takhle třísloupcové mobilní rozložení se záhlavím a zápatím v plné šířce? A s výstupem prvků nezávislých na pořadí daném zdrojovým kódem:

CSS:

Wrapper (display: flex; flex-flow: row wrap;) / * Nastavit všechny položky na 100% šířku * / .header, .main, .nav, .aside, .footer (flex: 1 100%;) / * In v tomto případě se spoléháme na původní objednávku, abychom cílili na mobilní zařízení: * 1. nadpis * 2. navigace * 3. tělo * 4. postranní panel * 5. zápatí * / / * Střední obrazovky * / @media all and (min -width : 600px) (/ * Oba postranní panely jsou na stejném řádku * / .aside (flex: 1 auto;)) / * Velké obrazovky * / @media all and (min-width: 800px) (/ * Invertovat pořadí zobrazení první postranní panel a hlavní tělo a řekněte hlavnímu prvku, aby zabíral maximálně dvakrát tolik místa než dva postranní panely * / .main (flex: 2 0px;) .aside-1 (pořadí: 1;) .main (pořadí : 2;) .aside-2 (pořadí: 3;) .zápatí (pořadí: 4;))

HTML:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

CSS:

Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap ; váha písma: tučné; zarovnání textu: na střed;) .wrapper> * (odsazení: 10px; flex: 1 100 %;) .header (pozadí: rajče;) .footer (pozadí: světlezelené;) .main (text -align: left; background: deepskyblue;) .aside-1 (pozadí: zlaté;) .aside-2 (pozadí: hotpink;) @media all and (min-width: 600px) (.aside (flex: 1 auto); )) @media all and (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside-2 (order: 3; ) .patička (pořadí: 4;))

Použití předpon flexboxu

Flexbox vyžaduje, aby většina prohlížečů podporovala předpony dodavatelů. To zahrnuje nejen použití předpon dodavatele před vlastnostmi, ale zcela jiných názvů vlastností a hodnot.

Je to proto, že specifikace flexboxu se postupem času vyvíjela a vytvořila „staré“, „tweener“ a „nové“ verze.

Možná nejlepším východiskem z této situace je napsat kód pomocí nové (a konečné) syntaxe a spustit CSS přes Autoprefixer, který velmi dobře zvládá vrácení zpět.

Alternativně je níže uvedena metoda Sass @mixin pro pomoc s některými předponami, která také poskytuje představu o tom, jaká opatření by měla být provedena:

SCSS:

@mixin flexbox () (zobrazení: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;) @mixin flex (hodnoty $) (-webkit- box-flex: $ values; -moz-box-flex: $ values; -webkit-flex: $ values; -ms-flex: $ values; flex: $ values;) @mixin order ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; order: $ val;) .wrapper (@include flexbox ();) .item (@include flex (1 200px); @include order (2);)

Podpora prohlížeče

Rozděleno podle "verzí" flexboxu na:

(new) - znamená podporu pro nejnovější syntaxi ze specifikace (např. displej: flex;
Pseudoelement barvy zástupného symbolu :: (nebo v některých případech pseudotřída) umožňuje zadat textový obsah prvku formuláře. Nastavuje se pomocí zástupného atributu: .

Obsah:

Flexbox je nový způsob uspořádání bloků na stránce. Jedná se o technologii vytvořenou speciálně pro rozložení prvků, na rozdíl od plováků. Používáním Flexbox můžete snadno zarovnat prvky vodorovně a svisle, změnit směr a pořadí prvků, natáhnout bloky na plnou výšku rodiče nebo je přibít ke spodnímu okraji.

UPD ze dne 02.02.2017: vytvořil praktický cheat sheet flexbox s živými ukázkami a popisy ze specifikace: cheatsheet Flexbox.

Příklady používají pouze novou syntaxi. V době psaní tohoto článku jsou nejsprávněji zobrazeny v Chrome... Ve Firefoxu fungují částečně, v Safari nefungují vůbec.

Podle caniuse.com, Flexbox není podporováno IE 8 a 9 a Opera Mini a ne všechny vlastnosti a / nebo předpony jsou vyžadovány v jiných prohlížečích.

To znamená, že technologii nelze nyní široce využívat, ale je nejvyšší čas ji lépe poznat.

Nejprve musíte vědět, že flexibilní položky jsou umístěny podél os. Ve výchozím nastavení jsou položky uspořádány vodorovně - podél hlavní osa- hlavní osa.

Také je třeba mít na paměti, že při použití Flexbox float, clear a vertical-align nefungují pro vnitřní bloky, stejně jako vlastnosti, které nastavují sloupce v textu.

Připravme testovací prostor pro experimenty:

Jeden rodičovský blok (žlutý) a 5 dětí.

Displej: flex

A nyní přidejte display: flex k rodičovskému prvku; ... Vnitřní divy jsou seřazeny (podél hlavní osy) ve sloupcích stejné výšky, bez ohledu na obsah.

displej: flex; Díky tomu jsou všechny děti flexibilní - ohebné, nikoli vložené nebo blokované, jak byly původně.

Pokud nadřazený blok obsahuje obrázky nebo text bez obalů, stanou se anonymními flexibilními položkami.

Zobrazit vlastnost pro Flexbox může nabývat dvou hodnot:

flex - chová se jako blokový prvek. Při výpočtu šířky bloků má přednost rozložení (pokud je šířka bloků nedostatečná, obsah může vylézt z okraje).

inline-flex - chová se jako inline-block. Priorita obsahu (obsah rozšiřuje bloky na požadovanou šířku tak, aby se čáry co nejvíce vešly).

Flex-směr

Směr rozložení boxů je řízen vlastností flex-direction.

Možné hodnoty:

řádek - řádek (výchozí hodnota); row-reverse - řada s prvky v opačném pořadí; sloupec - sloupec; column-reverse - sloupec s prvky v obráceném pořadí.

řádek a řádek-zpět

sloupec a sloupec-reverzní

Flex-wrap

Na jednom řádku může být mnoho bloků. Zda se zabalí nebo ne, je určeno vlastností flex-wrap.

Možné hodnoty:

nowrap - bloky nejsou zabalené (výchozí); obal - bloky jsou zabaleny; wrap-reverse - bloky jsou zabaleny a umístěny v opačném pořadí.

Abychom stručně napsali vlastnosti flex-direction a flex-wrap, existuje vlastnost: flex-flow.

Možné hodnoty: můžete nastavit obě vlastnosti nebo jen jednu. Například:

flex-flow: kolona; flex-flow: wrap-reverse; flex-flow: sloupec-obrácený obal;

Demo pro řádek-zpět zalomit-obrátit:

Objednat

Vlastnost order se používá k ovládání pořadí bloků.

Možné hodnoty: čísla. Chcete-li umístit blok jako první, nastavte mu pořadí: -1:

Zdůvodnit obsah

Existuje několik vlastností pro zarovnání položek: justify-content, align-items a align-self.

Justify-content a align-items se vztahují na nadřazený kontejner, align-self na potomky.

justify-content je zodpovědný za zarovnání s hlavní osou.

Možné hodnoty pro justify-content:

flex-start - položky jsou zarovnány od začátku hlavní osy (výchozí); flex-end - položky jsou zarovnány od konce hlavní osy; střed - položky jsou zarovnány na střed hlavní osy; mezera mezi - prvky jsou zarovnány podél hlavní osy a rozdělují mezi sebou volný prostor; space-around - položky jsou zarovnány podél hlavní osy a rozdělují kolem nich volný prostor.

flex-start a flex-end

prostor-mezi, prostor-kolem

Zarovnat položky

align-items je zodpovědný za zarovnání kolmé osy.

Možné hodnoty pro align-items:

flex-start - položky jsou zarovnány od začátku kolmé osy; ohebný konec - položky jsou zarovnány od konce kolmé osy; centrum - položky jsou vystředěny; základna - prvky jsou zarovnány na základnu; roztáhnout - Prvky jsou roztaženy tak, aby vyplnily veškerý prostor podél kolmé osy (výchozí).

flex-start, flex-end

základní linie, protažení

Zarovnat se

align-self je také odpovědný za zarovnání kolmé osy, ale je nastaven na jednotlivé položky flex.

Možné hodnoty align-self:

auto je výchozí. Znamená, že prvek používá položky align-items nadřazeného prvku; flex-start - položka je zarovnána od začátku kolmé osy; flex-end - položka je zarovnána od konce kolmé osy; střed - prvek je vystředěn; účaří - prvek je zarovnán k účaří; natáhnout - Prvek se natáhne tak, aby vyplnil celou výšku.

Zarovnat obsah

Chcete-li ovládat zarovnání v rámci víceřádkového ohebného kontejneru, existuje vlastnost align-content.

Možné hodnoty:

flex-start - položky jsou zarovnány od začátku hlavní osy; flex-end - položky jsou zarovnány od konce hlavní osy; střed - položky jsou zarovnány na střed hlavní osy; mezera mezi - prvky jsou zarovnány podél hlavní osy a rozdělují mezi sebou volný prostor; prostor kolem - prvky jsou zarovnány podél hlavní osy a rozdělují kolem nich volný prostor; roztáhnout – Prvky se roztáhnou, aby vyplnily celou jejich výšku (výchozí).

flex-start, flex-end

střed, protáhnout

prostor-mezi, prostor-kolem

Ps: Některé věci jsem neměl možnost vidět v akci, například řádek flex-flow: column wrap nebo kompletní záznam stejného flex-direction: column; flex-wrap: zavinovačka; ...

Prvky jsou naskládány, ale nejsou přenášeny:

Zábal se nespustí, když se ohýbá: sloupec; , i když ve specifikaci to vypadá takto:

Myslím, že to časem půjde.

UPD ze dne 21.06.2014: vše funguje, když dáte bloku výšku. Děkuji za tip

Modul Flexbox Layout (Flexible Box) má za cíl poskytnout efektivnější způsob umisťování, zarovnávání a distribuce volného prostoru mezi položkami v kontejneru, i když je jejich velikost neznámá a/nebo dynamická (odtud slovo „flex“).

Základní myšlenkou flexibilního rozvržení je dát kontejneru možnost měnit šířku/výšku (a pořadí) jeho položek, aby co nejlépe zaplnil dostupný prostor (hlavně aby se vešel na všechny typy a velikosti obrazovek). Nádoba flexbox roztahuje položky tak, aby vyplnily volný prostor, nebo je zmenšila, aby se zabránilo přetečení.

A co je nejdůležitější, Flexbox je směrově agnostický, na rozdíl od konvenčního uspořádání (boxy založené na vertikálním umístění a inline prvky založené na horizontálním umístění). I když fungují dostatečně dobře, postrádají flexibilitu pro podporu velkých nebo složitých aplikací (zejména pokud jde o změnu orientace, změnu velikosti, roztažení, zmenšení atd.).

Poznámka. Flexbox je vhodnější pro aplikační komponenty a malá rozvržení, zatímco CSS Grid je pro větší rozvržení.

Základy a terminologie

Vzhledem k tomu, že Flexbox je celý modul a nikoli samostatná vlastnost, obsahuje mnoho různých věcí, včetně celé řady vlastností. Některé jsou navrženy tak, aby byly nastaveny na jejich kontejner (rodič, známý jako "flex kontejner"), zatímco jiné jsou určeny k nastavení na děti (známé jako "flex items").

Zatímco konvenční systém rozvržení je založen na krabicových a inline směrech, Flexbox je založen na "flex-flow směrech". Podívejte se prosím na tento obrázek ze specifikace, abyste vysvětlili základní myšlenku Flexboxu.

V zásadě budou prvky umístěny podél hlavní osa(od main-start do main-end) popř příčná osa(od křížového začátku po křížový konec).

Podpora prohlížeče

Modul flexibilního rozvržení krabice CSS

Chrome pro Android

Prohlížeč Blackberry od verze 10 podporuje novou syntaxi.

Vlastnosti pro kontejner

Vlastnosti pro prvky

Vlastnosti pro nadřazenou položku (Flex Container)

Zobrazit

Definuje ohebný kontejner; řetězec nebo blok závisí na předané hodnotě. Zahrnuje flexibilní kontext pro všechny jeho přímé, děti.

Kontejner (displej: flex; / * nebo inline-flex * /)

Upozorňujeme, že sloupce CSS nemají vliv na kontejner Flex.

flex-direction

Nastavuje hlavní osu, tedy určuje směr prvků umístěných v kontejneru. Flexbox (kromě volitelného obalu) je koncept jednosměrného uspořádání. Přemýšlejte o flexibilních položkách především jako vodorovné řádky nebo svislé sloupce.

Kontejner (flex-směr: řádek | řádek-obrácený | sloupec | sloupec-obrácený;)

řádek (výchozí)- zleva doprava v ltr; zprava doleva v rtl;
řádek-zpět- zprava doleva v ltr; zleva doprava v rtl;
sloupec- stejné jako řada, pouze shora dolů;
sloupec-reverzní- stejně jako řada-zpět, pouze zdola nahoru;

flex-wrap

Ve výchozím nastavení se položky pokusí vyplnit pouze jeden řádek. Toto chování můžete změnit a v případě potřeby povolit prvky zalomení na další řádek.

Nádoba (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (výchozí)- všechny položky flex budou umístěny na jednom řádku;
zabalit- Flex položky budou rozloženy na více řádcích, shora dolů;
wrap-reverse- Flex položky budou rozloženy na více řádcích, zdola nahoru;

ospravedlnit-obsah

Určuje zarovnání podél hlavní osy. To pomáhá distribuovat volné místo, které zbylo poté, co všechny pevné a nepevné flexibilní položky dosáhly své maximální velikosti. Pomáhá vám také udržet určitou kontrolu nad zarovnáním prvků, když přetečou čáru.

Kontejner (zarovnat-obsah: flex-start | flex-end | střed | mezera-mezi | mezera-kolem;)

flexibilní start (výchozí)- prvky jsou přitlačeny na začátek řádku;
ohebný konec- prvky jsou přitlačeny na konec řádku;
centrum- položky jsou vystředěny podél čáry;
prostor-mezi- prvky jsou umístěny rovnoměrně na lince; první prvek je na začátku řádku, poslední prvek je na konci řádku;
prostor kolem- prvky jsou umístěny rovnoměrně na linii se stejným prostorem kolem nich. Všimněte si, že vizuálně prostor není stejný, protože všechny prvky mají stejný prostor na obou stranách. První prvek bude mít jednu jednotku prostoru na straně kontejneru, ale dvě jednotky mezi ní a dalším prvkem, protože další prvek má také jednu jednotku na obou stranách.

zarovnat-položky

Tato vlastnost určuje, jak se ohebné položky chovají podél příčné osy na aktuálním řádku. Přemýšlejte o tom jako oh, jen pro příčnou osu (kolmou k hlavní ose).

Kontejner (zarovnání položek: flex-start | flex-end | center | baseline | stretch;)

flexibilní start - prvky jsou umístěny na začátku příčné osy;
ohebný konec - prvky jsou umístěny na konci příčné osy;
střed - prvky jsou umístěny ve středu příčné osy;
základní linie- prvky jsou zarovnány se základní linií;
roztáhnout (výchozí)- natáhněte, aby se naplnila celá nádoba (stále dodržujte minimální šířku / maximální šířku);

zarovnat-obsah

Poznámka. Tato vlastnost nemá žádný účinek, pokud existuje pouze jeden řádek flexibilních položek.

flex-start- linky jsou umístěny na začátku kontejneru;
ohebný konec- linky jsou umístěny na konci nádoby;
centrum- linky jsou umístěny ve středu nádoby;
prostor-mezi- řádky jsou rozmístěny rovnoměrně, první řádek je na začátku kontejneru a poslední řádek na konci;
prostor kolem- čáry jsou rozmístěny rovnoměrně, se stejnou vzdáleností mezi nimi;
roztáhnout (výchozí)- čáry se táhnou přes celou šířku, aby zabraly zbývající místo;

Vlastnosti pro děti (flex předměty)

objednat

Ve výchozím nastavení jsou všechny prvky uspořádány v původním pořadí. Vlastnost order však řídí pořadí, ve kterém jsou prvky uspořádány v kontejneru.

Položka (objednávka: ; }

flex-grow

Tato vlastnost určuje schopnost prvku zvětšit se v případě potřeby. Bere hodnotu bez jednotek jako podíl, který určuje, kolik volného místa uvnitř kontejneru by měl prvek zabírat.

Pokud mají všechny položky flex-grow nastaveno na 1, pak bude volný prostor uvnitř kontejneru rovnoměrně rozdělen mezi všechny položky. Pokud má jeden z prvků hodnotu 2, pak prvek zabere dvakrát tolik místa než ostatní (alespoň to zkusí).

Položka (flex-grow: ; / * výchozí 0 * /)

Záporná čísla nelze zadat.

flex-base

Určuje výchozí velikost prvku před přidělením zbývajícího místa. Může to být délka (20%, 5rem atd.) nebo klíčové slovo. Klíčové slovo auto znamená „vypadat jako moje vlastnost šířka nebo výška“. Klíčové slovo content znamená „velikost je založena na obsahu prvku“ – toto klíčové slovo zatím není příliš dobře podporováno, takže je těžké ho otestovat a ještě těžší zjistit, jaký je jeho sourozenci min-content, max-content a fit-content dělají.

Položka (flex-base: | auto; / * výchozí auto * /)

Je-li nastaveno na 0, prostor navíc kolem obsahu nebude započítán. Pokud je nastaveno na auto, prostor navíc bude přidělen na základě hodnoty.

flex

Toto je zkratka pro a. Druhý a třetí parametr (flex-shrink a flex-base) jsou volitelné. Výchozí hodnota je 0 1 auto.

Položka (flex: žádná | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

sladit-sebe

Tato vlastnost vám umožňuje přepsat výchozí zarovnání (nebo sadu vlastností) pro jednotlivé položky Flex.

Podívejte se prosím na vysvětlení vlastnosti, abyste pochopili dostupné hodnoty.

Všimněte si, že plovoucí, vymazat a svislé zarovnání nemají žádný vliv na ohebnou položku.

Příklady

Začněme tím nejjednodušším příkladem, který řeší problém, který se vyskytuje téměř každý den: dokonalé centrování. Pokud používáte Flexbox, nemůže to být jednodušší.

Nadřazený (displej: flex; výška: 300px;) .child (šířka: 100px; výška: 100px; okraj: auto;)

Záleží na automatickém okraji flexibilního kontejneru, který absorbuje další prostor. Nastavením svislého okraje na auto na prvek tedy bude prvek dokonale vycentrován na obou osách.

Nyní použijeme několik dalších vlastností. Zvažte seznam 6 prvků, všechny esteticky zafixované, ale mohou být automatické. Chceme, aby byly rovnoměrně rozmístěny podél vodorovné osy a aby byly v pořádku při změně velikosti prohlížeče (žádné dotazy na média!).

Flex-container (displej: flex; flex-flow: řádkové balení; justify-content: space-around;)

Připraveno! Vše ostatní je jen pár konstrukčních problémů. Níže je příklad na CodePen, určitě tam zajděte a zkuste změnit velikost oken, abyste viděli, co se stane.

Zkusme něco jiného. Představte si, že máme navigaci zarovnanou vpravo úplně nahoře na obrazovce, ale chceme, aby byla vystředěná na středně velkých obrazovkách a jeden sloupec na malých obrazovkách. Snadné jako koláč.

Navigace (zobrazení: flex; flex-flow: obtékání řádků; justify-content: flex-end;) @media all a (max-width: 800px) (.navigation (justify-content: space-around;)) @media all a (max-width: 500px) (.navigation (flex-direction: column;))

Zkusme udělat něco ještě lepšího tím, že si pohrajeme s flexibilitou našich flex předmětů! Co takhle třísloupcové rozložení pro mobily se záhlavím a zápatím v plné šířce a nezávisí na původním pořadí prvků.

Wrapper (displej: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100 %;) @media all and (min-width: 600px) (.aside (flex: 1 auto;)) @media all and (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside- 2 (pořadí: 3;) .patička (pořadí: 4;))

Související vlastnosti

Chyby

Flexbox rozhodně není bez chyb. Nejlepší sbírka, kterou jsem viděl, pochází od Philipa Waltona a Grega Whitwortha Flexbugs. Toto je místo s otevřeným zdrojovým kódem, kde můžete sledovat všechny chyby, takže si myslím, že je nejlepší poslat odkaz.

CSS flexbox (Flexibilní modul rozvržení krabic)- modul rozložení flexibilního kontejneru - je způsob uspořádání prvků, založený na myšlence osy.

Flexbox se skládá z flex nádoba a flexibilní předměty... Flex položky mohou být uspořádány do řady nebo sloupců a zbývající volné místo je mezi ně rozděleno různými způsoby.

Modul flexbox vám umožňuje provádět následující úkoly:

Uspořádejte položky jedním ze čtyř směrů: zleva doprava, zprava doleva, shora dolů nebo zdola nahoru.
Přepsat pořadí zobrazení položek.
Automaticky upravte velikost prvků tak, aby se vešly do dostupného prostoru.
Vyřešte problém s horizontálním a vertikálním centrováním.
Zabalte předměty do kontejneru, aniž by přetékaly.
Vytvořte sloupce stejné výšky.
Vytvořit připnutý na konec stránky.

Flexbox řeší specifické potřeby vytváření jednorozměrných rozvržení, jako je navigační panel, protože flexibilní položky lze rozložit pouze podél jedné osy.

Seznam aktuálních problémů s moduly a řešení pro různé prohlížeče naleznete v článku Philipa Waltona.

Co je flexbox

Podpora prohlížeče

TJ: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Prohlížeč Android: 4.4, 4.1 -webkit-
Chrome pro Android: 44

1. Základní pojmy

Rýže. 1. Model flexboxu

K popisu modulu Flexbox se používá specifická sada termínů. Hodnota flex-flow a režim zápisu definují, jak tyto pojmy odpovídají fyzickým směrům: nahoře / vpravo / dole / vlevo, osy: vertikální / horizontální a rozměry: šířka / výška.

Hlavní osa- osa, podél které jsou rozmístěny ohebné předměty. Rozprostírá se v hlavní dimenzi.

Hlavní začátek a hlavní konec- čáry, které definují počáteční a koncovou stranu ohebného kontejneru, vzhledem k nimž jsou rozmístěny ohebné předměty (začínající od hlavního začátku směrem k hlavnímu konci).

Hlavní velikost) - Šířka nebo výška ohebného kontejneru nebo ohebných položek, podle toho, co je v základním rozměru, určuje základní velikost ohebného kontejneru nebo ohebného předmětu.

Křížová osa- osa kolmá k hlavní ose. Bočně se rozšiřuje.

Křížový začátek a konec- Čáry, které definují počáteční a koncovou stranu příčné osy, kolem které jsou rozmístěny ohebné položky.

Velikost kříže- šířka nebo výška ohebného kontejneru nebo ohebných předmětů, podle toho, co je v příčném rozměru, je jejich příčným rozměrem.

Rýže. 2. Režim řádků a sloupců

2. Flex nádoba

Flex kontejner nastavuje nový flexibilní kontext formátování pro svůj obsah. Flex kontejner není blokový kontejner, takže vlastnosti CSS jako float, clear, vertical-align nefungují pro podřízené prvky. Flex kontejner také není ovlivněn vlastnostmi column- *, které vytvářejí sloupce v textu a pseudoprvky :: první řádek a :: první písmeno.

Model rozložení flexboxu je spojen s konkrétní hodnotou ve vlastnosti display CSS nadřazeného prvku html, který obsahuje podřízené boxy. Chcete-li ovládat prvky pomocí tohoto modelu, musíte nastavit vlastnost zobrazení následovně:

Flex-container (/ * vygeneruje flexibilní kontejner na úrovni bloku * / zobrazí: -webkit-flex; display: flex;). Flex-container (/ * vygeneruje flexibilní kontejner na úrovni řádku * / display: -webkit-inline- flex; displej: inline-flex ;)

Po nastavení těchto hodnot vlastností se z každého potomka automaticky stane flexibilní prvek seřazený v jedné řadě (podél hlavní osy). Blokové a inline děti se však chovají stejně, tzn. šířka bloků se rovná šířce jejich obsahu, přičemž se bere v úvahu výplň a okraje prvku.

Rýže. 3. Zarovnání položek v modelu flexboxu

Pokud nadřazený blok obsahuje text nebo obrázky bez obalů, stanou se anonymními flexibilními položkami. Text je zarovnán k hornímu okraji bloku kontejneru a výška obrázku se rovná výšce bloku, tzn. deformuje se.

3. Flex položek

Položky Flex jsou bloky, které představují obsah nádoby Flex v toku. Flex kontejner nastavuje nový kontext formátování pro svůj obsah, který poskytuje následující funkce:

U flexibilních položek je jejich hodnota vlastnosti zobrazení uzamčena. Zobrazená hodnota: inline-block; a zobrazení: tabulka-buňka; vyhodnoceno na displeji: blok; ...
Bílé mezery mezi položkami zmizí: nestanou se vlastní flexibilní položkou, i když je text mezi položkami zabalen do anonymní flexibilní položky. Obsah anonymní položky Flex nelze upravit jako vlastní, ale zdědí je (například nastavení písma) z kontejneru Flex.
Absolutně umístěná ohebná položka se nepodílí na rozvržení flexibilního rozvržení.
Okrajová pole sousedních flexibilních položek se nesbalí.
Procenta okraje a odsazení se vypočítávají z vnitřní velikosti obsahujícího bloku.
okraj: auto; expandovat a absorbovat další prostor v odpovídající dimenzi. Lze je použít k zarovnání nebo rozšíření sousedních ohebných předmětů.
Výchozí automatická minimální velikost pro flexibilní položky je minimální velikost jejich obsahu, tj. min-width: auto; ... U rolovacích kontejnerů je automatická minimální velikost obvykle nulová.

4. Zobrazte pořadí flexibilních položek a orientaci

Obsah flex kontejneru lze rozložit v libovolném směru a v libovolném pořadí (přeuspořádání flex předmětů v kontejneru ovlivní pouze vizuální vykreslení).

4.1. Směr hlavní osy: směr ohybu

Tato vlastnost je specifická pro flex kontejner. Řídí směr hlavní osy, podél které jsou ohebné položky naskládány podle aktuálního režimu psaní. Neděděno.

flex-direction
hodnoty:
řádek	Výchozí nastavení je zleva doprava (v rtl, zprava doleva). Flex položky jsou rozloženy na lince. Směr hlavního začátku a konce hlavní osy odpovídá inline-start a inline-end inline-osy.
řádek-zpět	Směr zprava doleva (v rtl zleva doprava). Flex položky jsou rozloženy v linii vzhledem k pravému okraji kontejneru (v rtl - vlevo).
sloupec	Směr shora dolů. Položky Flex jsou uspořádány ve sloupci.
sloupec-reverzní	Sloupec s prvky v opačném pořadí, zdola nahoru.
počáteční
zdědit

Rýže. 4. Vlastnost flex-direction pro jazyky zleva doprava

Syntax

Flex-container (displej: -webkit-flex; -webkit-flex-direction: řada-reverzní; displej: flex; flex-direction: řada-reverzní;)

4.2. Ovládání multiline flex kontejneru: flex-wrap

Tato vlastnost určuje, zda bude ohebný kontejner jednořádkový nebo víceřádkový, a také nastaví směr příčné osy, který určuje směr, ve kterém jsou nové řádky ohebného kontejneru naskládány.

Ve výchozím nastavení jsou flexibilní položky naskládány na jeden řádek podél hlavní osy. Pokud přetečou, půjdou mimo ohraničující box flexibilního kontejneru. Nemovitost se nedědí.

Rýže. 5. Ovládání více linek pomocí vlastnosti Flex-Wrap pro jazyky LTR

Syntax

Flex-kontejner (displej: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;)

4.3. Zkratka pro směr a víceřádkový: flex-flow

Tato vlastnost vám umožňuje definovat směry hlavní a příčné osy a také možnost zalomit ohebné položky přes více čar, je-li to nutné. Je to zkratka pro vlastnosti flex-direction a flex-wrap. Výchozí flex-flow: row nowrap; ... nemovitost se nedědí.

Syntax

Flex-container (displej: -webkit-flex; -webkit-flex-flow: řádkové balení; displej: flex; flex-flow: řádkové balení;)

4.4. Zobrazit pořadí flexibilních položek: objednávka

Tato vlastnost určuje pořadí, ve kterém jsou položky Flex zobrazeny a umístěny v kontejneru Flex. Platí pro flex položky. Nemovitost se nedědí.

Zpočátku mají všechny položky flex pořadí: 0; ... Pokud pro prvek zadáte hodnotu mezi -1, přesune se na začátek časové osy a hodnotu 1 na konec. Pokud má více položek flex stejnou hodnotu objednávky, zobrazí se podle původní objednávky.

Syntax

Flex-container (displej: -webkit-flex; display: flex;) .flex-item (-webkit-order: 1; order: 1;)
Rýže. 6. Zobrazení pořadí flexibilních položek

5. Flexibilita flexibilních položek

Definujícím aspektem flexibilního rozvržení je schopnost „skládat“ položky změnou jejich šířky/výšky (v závislosti na tom, která velikost je na hlavní ose), aby se vyplnil dostupný prostor v základním rozměru. To se provádí pomocí vlastnosti flex. Ohebná nádoba přiděluje volný prostor mezi své potomky (v poměru k jejich poměru pružnosti a růstu), aby naplnila nádobu, nebo je zmenšila (v poměru k jejich poměru pružnosti a smrštění), aby se zabránilo přetečení.

Flexibilní položka bude zcela nepružná, pokud její hodnoty flex-grow a flex-shrink budou nulové, a flex jinak.

5.1. Flexibilní dimenzování s jednou vlastností: flex

Tato vlastnost je zkratkou pro vlastnosti flex-grow, flex-shrink a flex-base. Výchozí hodnota: flex: 0 1 auto; ... Můžete zadat jednu nebo všechny tři hodnoty vlastností. Nemovitost se nedědí.

Syntax

Flex-container (display: -webkit-flex; display: flex;) .flex-item (-webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

5.2. Rychlost růstu: flex-grow

Tato vlastnost řídí, o kolik poroste jedna flexibilní položka ve srovnání s ostatními flexibilními položkami ve flexibilním kontejneru při alokaci kladného bílého prostoru. Pokud je součet hodnot flex-grow flex položek na řádku menší než 1, zabírají méně než 100 % volného místa. Nemovitost se nedědí.

Rýže. 7. Správa volného místa v navigační liště pomocí flex-grow

Syntax

Flex-kontejner (displej: -webkit-flex; displej: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)

5.3. Smršťovací poměr: flex-smršťovací

Tato vlastnost určuje, jak moc se ohebná položka zmenší ve srovnání s ostatními ohebnými položkami při alokaci záporného bílého prostoru. Vynásobeno velikostí základny flex. Záporný prostor je přidělen úměrně tomu, jak moc se může položka zmenšit, takže například malá ohebná položka se nezmenší na nulu, dokud nebude větší ohebná položka viditelně zmenšena. Nemovitost se nedědí.

Rýže. 8. Zúžení flex položek v řadě

Syntax

Flex-kontejner (displej: -webkit-flex; displej: flex;). Flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. Velikost základny: flex-base

Vlastnost nastavuje počáteční základní velikost položky flex před přidělením volného místa podle poměrů flex. Pro všechny hodnoty kromě auto a content je základní velikost ohebnosti definována stejným způsobem jako šířka v režimech horizontálního zápisu. Procenta jsou relativní k velikosti ohebného kontejneru, a pokud není specifikována žádná velikost, hodnota použitá pro flexibilní základ je velikost jeho obsahu. Neděděno.

Syntax

Flex-kontejner (displej: -webkit-flex; display: flex;). Flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)

6. Zarovnání

6.1. Zarovnání hlavní osy: justify-content

Tato vlastnost zarovná ohebné položky k hlavní ose ohebného kontejneru rozložením volného prostoru neobsazeného ohebnými předměty. Když je položka převedena na flex kontejner, flex položky jsou ve výchozím nastavení seskupeny (pokud pro ně nemají nastavený okraj). Mezery jsou přidány po výpočtu hodnot okraje a flex-grow. Pokud některé položky mají nenulový flex-růst nebo okraj: auto; , vlastnost nebude mít žádný vliv. Nemovitost se nedědí.


hodnoty:
flex-start	Výchozí hodnota. Flex položky jsou rozloženy ve směru od počáteční čáry flexibilní nádoby.
ohebný konec	Flex položky jsou rozloženy ve směru od koncové linie flexibilní nádoby.
centrum	Flex položky jsou zarovnány do středu flexibilní nádoby.
prostor-mezi	Flex položky jsou rozmístěny rovnoměrně podél linky. První ohebná položka je umístěna v jedné rovině s okrajem počáteční čáry, poslední ohebná položka je v rovině s okrajem koncové čáry a zbytek ohebných položek na lince je rozmístěn tak, aby byl prostor mezi libovolnými dvěma sousedními položkami je stejný. Pokud je zbývající prázdné místo záporné nebo pokud je na řádku pouze jedna flexibilní položka, je tato hodnota totožná s parametrem flexibilního začátku.
prostor kolem	Ohebné položky na lince jsou rozmístěny tak, že vzdálenost mezi jakýmikoli dvěma sousedními ohebnými položkami je stejná a vzdálenost mezi první/poslední ohebnými položkami a okraji ohebného kontejneru je poloviční vzdáleností mezi ohebnými položkami.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Rýže. 9. Zarovnání položek a přidělení volného místa pomocí vlastnosti Justify-Content

Syntax

Flex-container (zobrazení: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start;)

6.2. Zarovnání napříč osami: zarovnání položek a zarovnání-vlastní

Položky Flex lze zarovnat podle příčné osy aktuálního řádku nádoby Flex. align-items nastavuje zarovnání pro všechny položky flex kontejneru, včetně anonymních flex položek. align-self vám umožňuje přepsat toto zarovnání pro jednotlivé flexibilní položky. Pokud jsou některé z příčných okrajů ohebné položky automatické, zarovnání samo nemá žádný účinek.

6.2.1. Zarovnat položky

Zarovná ohebné položky, včetně anonymních ohebných položek, podél příčné osy. Neděděno.


hodnoty:
flex-start
ohebný konec
centrum
základní linie	Základní linie všech ohebných položek zapojených do zarovnání jsou stejné.
protáhnout se
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Rýže. 10. Vertikální zarovnání položek v nádobě

Syntax

Flex-container (zobrazení: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)

6.2.2. Zarovnat se

Tato vlastnost je zodpovědná za zarovnání jedné ohebné položky na výšku flexibilní nádoby. Přepíše zarovnání zadané pomocí align-items. Neděděno.


hodnoty:
auto	Výchozí hodnota. Položka flex používá zarovnání zadané ve vlastnosti align-items kontejneru flex.
flex-start	Horní okraj ohebné položky je umístěn v jedné rovině s ohybovou čárou (nebo s rozestupem, daným okrajem a okrajem položky) přes začátek příčné osy.
ohebný konec	Spodní okraj ohebné položky je umístěn v jedné rovině s ohebnou čárou (nebo rozestupem, daným okrajem a okrajem prvku), která prochází koncem příčné osy.
centrum	Okraje ohebné položky jsou vystředěny na příčné ose v rámci ohybové linie.
základní linie	Položka flex je zarovnána se základní linií.
protáhnout se	Pokud je křížová velikost flexibilní položky automatická a žádný z křížových okrajů není automatický, položka se roztáhne. Výchozí hodnota.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Rýže. 11. Zarovnejte jednotlivé flexibilní položky

Syntax

Flex-container (display: -webkit-flex; display: flex;). Flex-item (-webkit-align-self: center; align-self: center;)

6.3. Zarovnání řádků flex kontejneru: align-content

Tato vlastnost zarovná řádky ve flexibilním kontejneru, když je na příčné ose místo navíc, podobně jako při zarovnávání jednotlivých položek na hlavní ose pomocí vlastnosti justify-content. Tato vlastnost nemá žádný vliv na jednovrstvý flex kontejner. Neděděno.


hodnoty:
flex-start	Linky jsou naskládány směrem k začátku ohebného kontejneru. Okraj první linie je umístěn blízko okraje flex nádoby, každá následující linie je umístěna blízko předchozí linie.
ohebný konec	Šňůry jsou naskládány ke konci ohebné nádoby. Okraj posledního řádku je umístěn blízko okraje flex kontejneru, každý předchozí řádek je umístěn blízko dalšího řádku.
centrum	Šňůry jsou naskládány směrem ke středu ohebného kontejneru. Řádky jsou blízko u sebe a jsou zarovnány ke středu ohebného kontejneru se stejnou vzdáleností mezi počátečním okrajem obsahu ohebného kontejneru a prvním řádkem a mezi koncovým okrajem obsahu ohebného kontejneru a posledním řádkem.
prostor-mezi	Čáry jsou rovnoměrně rozmístěny ve flex kontejneru. Pokud je zbývající volné místo záporné nebo je v kontejneru flex pouze jedna čára flex, je tato hodnota totožná s hodnotou flex-start. V opačném případě je okraj prvního řádku umístěn blízko počátečního okraje obsahu flexibilního kontejneru a okraj posledního řádku je umístěn blízko zadního okraje obsahu flexibilního kontejneru. Zbývající čáry jsou rozmístěny tak, že vzdálenost mezi libovolnými dvěma sousedními čarami je stejná.
prostor kolem	Linky jsou rovnoměrně rozmístěny v ohebném kontejneru s polovičním prostorem na obou koncích. Pokud je zbývající volné místo záporné, je tato hodnota totožná se středem centu. V opačném případě jsou řádky rozmístěny tak, že mezery mezi libovolnými dvěma sousedními řádky jsou stejné a vzdálenost mezi prvním/posledním řádkem a okraji obsahu ohebného kontejneru je poloviční než vzdálenost mezi řádky.
protáhnout se	Výchozí hodnota. Řady pružných předmětů se rovnoměrně natahují, aby zaplnily veškerý dostupný prostor. Pokud je zbývající volné místo záporné, je tato hodnota totožná s flex-start. V opačném případě bude volný prostor rozdělen rovnoměrně mezi všechny řádky, čímž se zvětší jejich boční velikost.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Rýže. 12. Víceřádkové zarovnání flexibilních položek

Syntax

Flex-container (display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end ; výška: 100px ;)

Jedním z důvodů, proč flexbox rychle zaujal webové vývojáře, je to, že poprvé přinesl na web správné možnosti zarovnání. Umožnil správné vertikální zarovnání, takže konečně můžeme krabici snadno vycentrovat. V této příručce se důkladně podíváme na to, jak ve Flexboxu fungují vlastnosti zarovnání a zarovnání.

K vystředění našeho rámečku používáme vlastnost align-items k zarovnání naší položky na příčnou osu, což je v tomto případě osa bloku běžící svisle. Pomocí justify-content zarovnáme položku na hlavní osu, což je v tomto případě vložená osa běžící vodorovně.

Níže se můžete podívat na kód tohoto příkladu. Změňte velikost kontejneru nebo vnořeného prvku a vnořený prvek zůstane vždy vycentrován.

Vlastnosti, které řídí zarovnání

Vlastnosti, na které se v této příručce podíváme, jsou následující.

justify-content - řídí zarovnání všech položek na hlavní ose.
align-items - řídí zarovnání všech položek na příčné ose.
align-self - řídí zarovnání jednotlivé flexibilní položky na příčné ose.
align-content - popsáno ve specifikaci jako pro „balicí ohebné šňůry“; řídí prostor mezi ohybovými čarami na příčné ose.

Také zjistíme, jak lze použít automatické okraje pro zarovnání ve flexboxu.

Poznámka: Vlastnosti zarovnání ve Flexboxu byly umístěny do vlastní specifikace - CSS Box Alignment Level 3. Očekává se, že tato specifikace nakonec nahradí vlastnosti definované v Flexbox Level One.

Křížová osa

Vlastnosti align-items a align-self řídí zarovnání našich flexibilních položek na příčné ose, dolů po sloupcích, pokud je flex-direction řádek a podél řádku, pokud je flex-direction sloupec.

V nejjednodušším příkladu ohybu využíváme vyrovnání napříč osami. Pokud do kontejneru přidáme display:flex, všechny podřízené položky se stanou flexibilními položkami uspořádanými v řadě. Všechny se roztáhnou tak, aby byly vysoké jako nejvyšší položka, protože tato položka určuje výšku položek na příčné ose. Pokud má váš flex kontejner nastavenou výšku, pak se položky natáhnou do této výšky bez ohledu na to, kolik obsahu je v položce.

Důvod, proč mají položky stejnou výšku, je ten, že počáteční hodnota align-items, vlastnost, která řídí zarovnání na příčné ose, je nastavena na roztažení.

Můžeme použít jiné hodnoty, abychom řídili, jak se položky zarovnají:

align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

V živém příkladu níže je hodnota align-items roztáhnout. Vyzkoušejte ostatní hodnoty a zjistěte, jak jsou všechny položky v flex kontejneru vzájemně zarovnány.

Zarovnání jedné položky s align-self

Vlastnost align-items nastavuje vlastnost align-self pro všechny flexibilní položky jako skupinu. To znamená, že můžete explicitně deklarovat vlastnost align-self, aby cílila na jednu položku. Vlastnost align-self přijímá všechny stejné hodnoty jako align-items plus hodnotu auto, která resetuje hodnotu na hodnotu definovanou na flex kontejneru.

V tomto dalším živém příkladu má flex kontejner položky align-items: flex-start, což znamená, že položky jsou všechny zarovnány na začátek příčné osy. Zacílil jsem na první položku pomocí selektoru prvního potomka a nastavil jsem tuto položku na align-self: stretch; jiná položka byla vybrána pomocí své třídy selected a daného align-self: center. Můžete změnit hodnotu align-items nebo změnit hodnoty align-self u jednotlivých položek, abyste viděli, jak to funguje.

Změna hlavní osy

Dosud jsme se zabývali chováním, když je náš směr ohybu řádek a při práci v jazyce psaném shora dolů. To znamená, že hlavní osa probíhá podél řady vodorovně a naše zarovnání napříč osou posouvá položky nahoru a dolů.

Pokud změníme směr ohybu na sloupec, položky align-items a align-self zarovnají položky doleva a doprava.

Můžete si to vyzkoušet v příkladu níže, který má flex kontejner s flex-direction: column, ale jinak je přesně stejný jako v předchozím příkladu.

Zarovnání obsahu na příčné ose – vlastnost align-content

Dosud jsme zarovnávali položky nebo jednotlivou položku uvnitř oblasti definované flex-kontejnerem. Pokud máte zabalený víceřádkový flexibilní kontejner, můžete také chtít použít vlastnost align-content k řízení distribuce prostoru mezi řádky. Ve specifikaci je to popsáno jako balicí flex linky.

Aby zarovnání obsahu fungovalo, potřebujete větší výšku ve vašem ohebném kontejneru, než je potřeba k zobrazení položek. Poté funguje na všech položkách jako na sadě a diktuje, co se stane s tímto volným místem a zarovnáním celé sady položek v něm.

Vlastnost align-content nabývá následujících hodnot:

align-content: flex-start
align-content: flex-end
zarovnat-obsah: střed
zarovnat-obsah: mezera-mezi
align-content: space-around
zarovnat-obsah: roztáhnout
align-content: prostorově rovnoměrně (není definováno ve specifikaci Flexbox)

V živém příkladu níže má flex kontejner výšku 400 pixelů, což je více, než je potřeba k zobrazení našich položek. Hodnota align-content je mezera mezi, což znamená, že dostupný prostor je sdílen mezi ohybové linky, které jsou umístěny v jedné rovině se začátkem a koncem nádoby na příčné ose.

Vyzkoušejte ostatní hodnoty, abyste viděli, jak vlastnost align-content funguje.

Opět můžeme přepnout náš flexibilní směr na sloupec, abychom viděli, jak se tato vlastnost chová, když pracujeme po sloupci. Stejně jako dříve potřebujeme dostatek místa v příčné ose, abychom měli po zobrazení všech položek volné místo.

Poznámka: hodnota space-evenly není definována ve specifikaci flexboxu a je pozdějším doplněním specifikace Box Alignment. Podpora prohlížeče pro tuto hodnotu není tak dobrá jako u hodnot definovaných ve specifikaci flexboxu.