Výchozí hodnota: 0 1 Auto.

W3C doporučuje používat zkrácenou vlastnost Flex namísto jednotlivých vlastností, protože flex Flex správně resetuje žádné nespecifikované komponenty pro typické použití.

zarovnat sebe.

Vlastní vlastnost ALIGN-SELF Umožňuje přepsat výchozí zarovnání (nebo hodnota zadaná prostřednictvím alignových položek) pro jednotlivé flexy flex. Chcete-li pochopit dostupné hodnoty, viz popis alignových položek pro kontejner FLEX.

Hodnoty

Pro třetí a čtvrté prvky ohybu je zarovnání přepsáno prostřednictvím vlastnictví zarovnání.

Modul FlexBox-Leuauuta. (Flexibilní box - "flexibilní blok", na tento moment W3C kandidát doporučení) Dává úkol, aby nabídl efektivnější způsob pokládání, vyrovnávání a distribuci volného místa mezi prvky v kontejneru, i když jejich velikost je neznámá a / nebo dynamická (tedy slovo "flexibilní").

Hlavní myšlenka flex-guarda v kontejneru, který je obdařen schopností změnit šířku / výšku (a pořadí) jeho prvků pro nejlepší plnění prostoru (ve většině případů - pro podporu všech typů displejů a velikosti obrazovek ). Kontejner FLEX táhne prvky pro vyplnění volného místa nebo je komprimuje, aby se zabránilo ohraničení.

Nejdůležitější, flexbox-leiaut nezávisí na směru, na rozdíl od obvyklých leantů (bloky, umístěných svisle a inline prvky jsou vodorovně). Zatímco obvyklé Leiaut je skvělé pro webové stránky, postrádá flexibilitu (žádný Canalybur) na podporu velkých nebo komplexních aplikací (zejména pokud jde o změnu orientace obrazovky, změna velikosti, protahování, komprese atd.).

Komentář: FlexBox-Leuuout je nejvhodnější pro kompozitní části aplikace a malých leuauterics, zatímco mřížka je více používána pro laéry velkým měřítkem.

Základy

Protože FlexBox je celý modul a ne jen jeden vlastnost, kombinuje mnoho vlastností. Některé z nich by měly být aplikovány na kontejner (rodičovský prvek, tzv. flex Container.), zatímco jiné vlastnosti platí pro podřízené prvky, nebo flex FLEX.

Pokud je obvyklá leuauout založena na pokynech blokových a inline prvků, je flex-Liaut založen na pokynech "proudění proudění". Podívejte se na toto schéma z specifikace vysvětlující základní myšlenku flex-Leuaitova.

Většina prvků bude distribuována buď spolu hlavní osa (z hlavní start. před hlavní konec.) nebo spolu příčná osa (z křížový start. před cross-end.).

• hlavní osa - hlavní osa podél které jsou umístěny Flex Elements. Poznámka: Nemusí být nutně horizontální, to vše závisí na vlastnosti Směr Flex (viz níže).
• hlavní start. | hlavní konec. - Pružné prvky jsou umístěny do kontejneru z hlavní startovací polohy k hlavnímu koncové poloze.
• hlavní velikost. - Šířka nebo výška elementu Flex v závislosti na vybrané primární hodnotě. Hlavní hodnota může být buď šířka nebo výška prvku.
• křížová osa. - příčná osa kolmá k hlavnímu. Jeho směr závisí na směru hlavní osy.
• křížový start. | cross-end. - Pryč jsou naplněny prvky a jsou umístěny v nádobě z příčné startovací polohy k křížové poloze.
• cross Size. - Šířka nebo výška flex elementu, v závislosti na velikosti rozměrů, se rovná této velikosti. Tato vlastnost se shoduje s šířkou nebo výškou položky v závislosti na velikosti rozměrů.

Vlastnosti

displej: Flex | Inline-flex;

Platí pro:

Určuje kontejner FLEX (inline nebo blok, v závislosti na vybrané hodnotě), připojuje kontext flex pro všechny jeho okamžité potomky.

Mějte na paměti:

• Sloupce CSS nefungují s kontejnerem FLEX
• float, jasný a vertikální-sladit nefungují s prvky flex

směřování ohybu.

Platí pro: Kontejner rodičovského elementu.

Nastaví hlavní osu hlavní osy, čímž se určuje směr pro ohybové prvky umístěné v nádobě.

• Řádek (výchozí): zleva doprava pro LTR, vpravo doleva pro RTL;
• Řádek-reverzní: vlevo dole pro LTR, zleva doprava pro RTL;
• sloupec: podobný řádku, shora dolů;
• sloupec-reverzní: podobný řádku-reverzní, dno nahoru.

flex-wrap.

Platí pro: Kontejner rodičovského elementu.

Určuje, zda je kontejner bude jednovrstvý nebo multi-line, stejně jako směr příčné osy určující směr, který bude umístěn nové čáry.

• nowrap (výchozí): jednorázový / zleva doprava pro LTR, vpravo doleva pro RTL;
• wrap: Multi-line / zleva doprava pro LTR, vpravo doleva pro RTL;
• wrap-reverzní: Multi-line / vpravo doleva pro LTR, zleva doprava pro RTL.

flex-tok.

Platí pro: Kontejner rodičovského elementu.

Jedná se o snížení vlastností směru směru flex a flex-flex, které dohromady definují hlavní a příčnou osu. Výchozí hodnota má hodnotu řádku Nowrap.

Platí pro: Kontejner rodičovského elementu.

Určuje vyrovnání vzhledem k hlavní ose. Pomáhá distribuovat zbývající volný prostor v případě, kdy prvky linky nejsou "protahování", nebo protáhnout, ale již dosáhly maximální velikosti. Také umožňuje určitý způsob, jak ovládat zarovnání prvků, když je řetězec vydán.

• flex-Start: Prvky jsou posunuty na začátek řádku;
• flex-End: Prvky jsou posunuty do konce řetězce;
• centrum: Prvky jsou vyrovnány ve středu linky;
• prostor mezi: prvky jsou rozděleny rovnoměrně (první prvek na začátku linky, poslední - na konci);
• prostor-kolem: prvky jsou rovnoměrně distribuovány se stejnou vzdáleností mezi sebou a hranic řetězce.

Platí pro: Kontejner rodičovského elementu.

Definuje výchozí chování prvků Flex jsou relativní k příčné ose na aktuálním řádku. Zvažte tuto verzi ospravedlnit-obsah pro příčnou osu (kolmo k hlavnímu).

• flex-Start: Cross-Start hranice pro položky je umístěna na křížové poloze;
• flex-End: Cross-end ohraničení pro předměty je umístěn na křížové poloze;
• centrum: Prvky jsou vyrovnány ve středu příčné osy;
• základní linie: Prvky jsou sladěny pro jejich základní linii;
• stretch (výchozí): Prvky jsou nataženy, plnění nádoby (s přihlédnutím k min-šířce / max-šířce).

Platí pro: Kontejner rodičovského elementu.

Zarovnává linky FLEX kontejneru v přítomnosti volného místa na příčné ose, stejně jako odůvodnění obsahu na hlavní ose.

Komentář: Tato vlastnost nefunguje s jedním řádkem FlexBox.

• flex-Start: Linky jsou zarovnány vzhledem k počátečnímu kontejneru;
• flex-end: Řádky jsou vyrovnány vzhledem ke konci kontejneru;
• centrum: Řádky jsou v centru kontejneru zarovnány;
• prostor - mezi: řádky jsou rozloženy rovnoměrně (první řádek na začátku řádku, druhý je na konci);
• prostor-kolem: řádky jsou rovnoměrně distribuovány se stejnou vzdáleností;
• stretch (výchozí): Řádky jsou nataženy, vyplnění volného místa.

objednat

Platí pro:

Ve výchozím nastavení jsou Flex Elements umístěny v původním pořadí. Vlastnost objednávky však může ovládat pořadí jejich umístění v kontejneru.

Objednat:<celé číslo\u003e

flex-růst.

Platí pro: Dcera prvek / flex element.

Určuje, zda je v případě potřeby schopnost "růst" schopnost "růst". Vezme indexovanou hodnotu, která slouží jako poměr. Určuje, jaká frakce volného místa uvnitř kontejneru může prvek zabírat.

Pokud všechny položky mají vlastnost Flex-růst jako 1, pak každý potomek obdrží stejnou velikost uvnitř kontejneru. Pokud nastavíte jeden z potomků na 2, pak bude trvat dvakrát více místa než ostatní.

Flex-růst:<Číslo \u003e. (výchozí 0)

flex-Shrink.

Platí pro: Dcera prvek / flex element.

Určuje pro flex element schopnost v případě potřeby komprimovat.

Flex-Shrink: (Výchozí 1)

Negativní čísla nejsou přijata.

flex-základ.

Platí pro: Dcera prvek / flex element.

Určuje výchozí velikost prvku před distribucí prostoru v kontejneru.

Flex-base:<délka\u003e. | Auto (výchozí auto)

ohebný

Platí pro: Dcera prvek / flex element.

Jedná se o snížení flex-růst, Flex-Shrink a Flex-báze. Druhé a třetí parametry (Flex-Shrink, Flex-Based) jsou volitelné. Výchozí hodnota je 0 1 Auto.

zarovnat sebe.

Platí pro: Dcera prvek / flex element.

Umožňuje přepsat výchozí zarovnání nebo v souladu s alignem, pro jednotlivé flexy flex.

Viz popis vlastnosti ALIGN-BOLACE pro lepší pochopení dostupných hodnot.

Příklady

Začněme s velmi jednoduchým příkladem, který se vyskytuje téměř každý den: zarovnání přesně ve středu. Pokud používáte flexbox, nic není snadnější.

Tento příklad je založen na skutečnosti, že okraj v kontejneru FLEX specifikovaná jako Auto absorbuje zbytečný prostor, takže referenční úloha tedy řídí prvek přesně ve středu obou os.

Nyní pojďme používat některé vlastnosti. Představte sadu 6 prvků pevné velikosti (pro krásu), ale s možností změnit velikost kontejneru. Chceme je rovnoměrně rozdělit vodorovně, takže když je okno prohlížeče změněno, všechno vypadalo dobře (bez @ media-rekordér!).

Připraven. Všechno ostatní je otázkou registrace. Níže je umístěn Codepen, který tento příklad ukazuje. Ujistěte se, že se pokusíte protáhnout / mačkat okno prohlížeče a zjistit, co se stane.

Zkusme něco jiného. Představte si, že potřebujeme navigaci v pravém okraji na pravém okraji na samém vrcholu našich stránek, ale chceme, aby se ve středu pro středně velké obrazovky a obrátil se na jeden sloupec na malé. Všechno je dost jednoduché.

Zkusme něco lepšího a hrát si s flexibilitou flexibilních prvků! Jak se cítím orientován mobilní zařízení Tří-chone rozložení s plnou čepičkou a suterénem? A další pořadí umístění.

Pokud řeknete krátké, pak rozložení s Flexbox nám dává jednoduché řešení jednou obtížných úkolů. Například, když potřebujete zarovnat vertikální prvek, nebo stiskněte suterén ke spodní části obrazovky, nebo jednoduše vložte několik bloků do jednoho řádku, aby zabírají vše volné místo. Tyto úkoly jsou vyřešeny bez ohybu. Tyto řešení jsou však zpravidla podobné "berlí" - recepce pro použití CSS není určeno. Zatímco s FlexBoxem jsou tyto úkoly řešeny přesně tak, jak je myšlenkem modelu flex.

CSS Flexibilní box rozložení modul (modul CSS pro moduly s flexibilními bloky), krátký flexbox, vytvořený pro odstranění chyb při vytváření různých struktur HTML, včetně upravených pod různými šířkami a výškou, a vytvořte rozložení logického a jednoduchého. A logický přístup, zpravidla pracuje v neočekávaných místech, kde výsledek nebyl zkontrolován - naše logika!

FlexBox umožňuje elegantně ovládat nejrůznější parametry prvků uvnitř nádoby: směr, řád, šířka, výška, vyrovnání podél a napříč, distribuce volného prostoru, protahování a stlačení prvků.

Základní znalosti

FlexBox se skládá z kontejneru a jeho dětských prvků (položek) (flexibilní prvky).

Chcete-li zahrnout FlexBox, libovolný HTML Element. Dostatečné pro přiřazení displeje vlastnosti CSS: Flex; nebo zobrazení: inline-flex; .

Po zapnutí vlastností FLEX jsou uvnitř nádoby vytvořeny dvě osy: Hlavní a příčná (kolmá (⊥), křížová osa). Všechny vnořené prvky (první úroveň) jsou vybudovány na hlavní ose. Ve výchozím nastavení je hlavní osa vodorovná a má směr zleva doprava (→) a křížová osa, v tomto pořadí, vertikální a je směrována shora dolů (↓).

Hlavní a křížová osa lze měnit v místech, pak se prvky budou umístěny nahoře (↓) a když přestanou montáže do výšky, budou se pohybovat zleva doprava (→) - to znamená, že osy jednoduše změnily v místech . Začátek a konec umístění prvků se zároveň nemění - pouze směry (osa)! Proto si musíte představit osu uvnitř kontejneru. Nicméně, to není nutné myslet si, že tam jsou některé "fyzické" osy a oni něco ovlivňují. Osa je zde pouze směr pohybu prvků uvnitř nádoby. Například, pokud jsme indikovali vyrovnání prvků ve středu hlavní osy a pak změnil směr této hlavní osy, změní se a zarovnání: Prvky byly ve středu vodorovně a oceli ve středově vertikálně. . Viz příklad.

Dalším důležitým znakem Flex Box je přítomnost řady v příčném směru. Chcete-li pochopit, o čem mluvíme, pojme si představit, že existuje hlavní horizontální osa, mnoho prvků a ne "stoupání" do kontejneru, takže jdou do jiné řady. Ty. Kontejner vypadá takto: kontejner, uvnitř IT dvě řady, v každé řadě pro několik prvků. Prezentován? Nezapomeňte, že můžeme sladit vertikálně nejen prvky, ale také řádky! Jak funguje dobře viditelný v příkladu nemovitosti. A tak to schematicky vypadá:

CSS vlastnostiKterá může ovlivnit stavební stavba modelu: plovák, čirý, vertikální zarovnání, sloupce nefungují v aplikaci Flex Design. Používá jiný model pro budování rozložení a tyto vlastnosti CSS jsou jednoduše ignorovány.

CSS Vlastnosti FlexBox.

FlexBox obsahuje různá pravidla CSS pro řízení celého pružného návrhu. Někteří je třeba aplikovat na hlavní kontejner, zatímco jiní k prvkům této nádoby.

Pro kontejner

Zahrnuje vlastnost Flex pro položku. Podle této nemovitosti, prvek investovaný do ní spadá: jsou postiženi pouze potomci první úrovně - stanou se prvky kontejneru Flex.

• ohebný - Prvek je natažen na celou šířku a má svůj plný prostor mezi okolními bloky. Veslování probíhá na začátku a na konci bloku.
• inline-flex. - Prvek je zefektivněn jinými prvky. V tomto případě je jeho vnitřní část formátována jako blokový prvek a samotný prvek je jako vestavěný.

flex a inline-Flex se liší ve skutečnosti, že různě komunikovat s okolními prvky, jako je zobrazení: blok a displej: inline-blok.

Mění směr hlavní osy kontejneru. Příčná osa odpovídajícím způsobem se mění.

• Řádek (výchozí) - Směr prvků zleva doprava (→)
• sloupec. - Směr prvků shora dolů (↓)
• Řádek. - Směr prvků vpravo vlevo (←)
• sloupec-reverzní. - Směr prvků zdola nahoru ()

Řídí převod prvků nekompanování kontejneru.

• nowrap (výchozí) - Vnořené prvky jsou umístěny v jednom řádku (během směru \u003d řádek) nebo v jednom sloupci (během směru \u003d sloupec), bez ohledu na to, zda jsou umístěny v nádobě nebo ne.
• zabalit. - Zahrnuje přenos položek do dalšího řádku, pokud nejsou umístěny v kontejneru. To zahrnuje pohyb prvků na příčné ose.
• obal. - Také, že zabalí pouze převod, nebude dolů, a nahoru (v opačném směru).

Kombinuje ovladače směřovače a Flex-Wrap. Často se používají společně, takže vlastnost Flex-tok byl vytvořen pro psaní menšího kódu.

flex-tok přijímá hodnoty obou vlastností oddělených prostorem. Nebo můžete zadat jednu hodnotu jakéhokoliv vlastnosti.

/ * Pouze směr FLEX * / FLEX-FLOW: Řada; Flex-tok: řádek; Flex-tok: sloupec; Flex-tok: sloupec-reverzní; / * Pouze flex-wrap * / flex-tok: Nowrap; Flex-tok: obal; Flex-tok: obal; / * Okamžitě oba významy: směr Flex a Flex-Wrap * / Flex-tok: řádek Nowrap; Flex-tok: Sloupový zábal; Flex-tok: sloupec-reverzní wrap-reverzní; Ostatní obsah:

Zarovná prvky na hlavní ose: pokud směr \u003d řádek, pak vodorovně a pokud směr \u003d sloupec, pak svisle.

• flex-Start (výchozí) - Prvky půjdou od začátku (na konci mohou být místo).
• flex-end. - Prvky jsou vyrovnány do konce (místo zůstane na začátku)
• centrum - ve středu (místo zůstane vlevo a vpravo)
• prostor mezi. - extrémní prvky jsou stisknuty k okrajům (místo mezi prvky je rozděleno rovnoměrně)
• prostor-kolem. - Volný prostor je rovnoměrně rozložen mezi prvky (extrémní prvky nejsou stisknuty k okrajům). Prostor mezi okrajem kontejneru a extrémními prvky bude dvakrát menší než prostor mezi prvky uprostřed řádku.
• space-rovnoměrně

Zarovnává řady, ve kterých jsou umístěny prvky na příčné ose. Stejný jako ospravedlnění pouze pro opačnou osu.

Poznámka: Práce, když je nejméně 2 řádky, tj. Pokud je jen 1 řádek se nic nestane.

Ty. Je-li flex-Směr: řádek, tato vlastnost bude sladit neviditelné řádky svisle | Je důležité poznamenat, že nadmořská výška bloku musí být nastavena a měla by být větší než výška série, jinak se řady sami protáhnout kontejner a jejich vyrovnání ztrácí svůj význam, protože mezi nimi neexistuje žádný volný prostor. . Ale když směr FLEX: sloupec, pak řádky pohybují vodorovně → a šířka kontejneru je téměř vždy větší než šířka řady a vyrovnání řádků okamžitě získává význam ...

• stretch (výchozí) - Řádky Stretch vyplněte řetězec úplně
• flex-Start. - Řádky jsou seskupeny v horní části kontejneru (na konci může být místo).
• flex-end. - Řádky jsou seskupeny v dolní části kontejneru (místo zůstane na začátku)
• centrum - Řádky jsou seskupeny do středu kontejneru (místo zůstane na okrajích)
• prostor mezi. - extrémní řádky jsou lisovány směrem k okrajům (místo mezi řádky je rovnoměrně rozloženo)
• prostor-kolem. - Volný prostor je rovnoměrně rozložen mezi řádky (extrémní prvky nejsou stisknuty směrem k okrajům). Prostor mezi okrajem kontejneru a extrémními prvky bude dvakrát menší než prostor mezi prvky uprostřed řádku.
• space-rovnoměrně - Také, že prostor-kolem, pouze vzdálenost v extrémních prvcích k okrajům kontejneru je stejná jako mezi prvky.

Vyrovnává prvky na příčné ose uvnitř řádku (neviditelná čára). Ty. Samotné řádky jsou vyrovnány přes alignový obsah a prvky v těchto řadách (řetězce) prostřednictvím alignových předmětů a to vše na příčné ose. Neexistuje žádná taková separace od hlavní osy, neexistují žádné koncepty série a prvků jsou zarovnány prostřednictvím ospravedlnění obsahu.

• stretch (výchozí) - Prvky Stretch plnění řetězce úplně
• flex-Start. - Prvky jsou stisknuty na začátek řádku
• flex-end. - Prvky jsou stisknuty proti konci řady
• centrum - Prvky jsou vyrovnávání ve středu řádku
• základní linie - prvky jsou zarovnány na základní text

Pro kontejnerové prvky

Určuje rostoucí faktor prvku v přítomnosti volného místa v kontejneru. Výchozí fréza flex: 0 tj. Ne prvky by se měly zvýšit a vyplnit volný prostor v kontejneru.

Výchozí flex-růst: 0

• Pokud všechny prvky označují Flex-Grow: 1, pak se všechny natahují stejně a vyplňte vše volné místo v kontejneru.
• Pokud jeden z prvků indikuje flex-růst: 1, pak vyplní všechny volné místo v kontejneru a zarovnání prostřednictvím odůvodnění-obsah práce nebude schopna pracovat: není nic takového pro sladění volného prostoru ...
• Při ohybu: 1. Pokud jeden z nich má flex-růst: 2, bude 2krát více než všichni ostatní
• Pokud všechny ohybové bloky uvnitř kontejneru FLEX mají flex-růst: 3, pak budou stejné velikosti
• S flex-růst: 3. Pokud jeden z nich má flexibilní: 12, bude 4krát více než všichni ostatní

Jak to funguje? Předpokládejme, že nádoba má šířku 500px a obsahuje dva prvky, z nichž každá má základní šířku 100px. Proto zůstávají 300 volných pixelů v kontejneru. Nyní, pokud zadáte Flex-Grow: 2 první prvek; a druhý flex-růst: 1; Bloky budou mít celou dostupnou šířku kontejneru a šířka prvního bloku bude 300px a druhý 200px. To je vysvětleno tím, že dostupné volné místo 300px v kontejneru byl rozdělen mezi prvky v poměru 2: 1, + 200px z první a + 100px sekundy.

Poznámka: V hodnotě můžete určit frakční čísla, například: 0,5 - Flex-růst: 0,5

Určuje faktor redukce prvku. Funkce je opačný flex-růst a určuje, jak musí být prvek stlačován, pokud není v kontejneru žádný volný prostor. Ty. Tato nemovitost začíná pracovat, když součet velikostí všech prvků je větší než velikost kontejneru.

Výchozí Flex-Shrink: 1

Předpokládejme, že nádoba má šířku 600px a obsahuje dva prvky, z nichž každá má šířku 300px - flex-bázi: 300px; . Ty. Dva prvky zcela vyplňují kontejner. První prvek indikuje Flex-Shrink: 2; a druhý flex-smršťovací: 1; . Nyní snižuje šířku kontejneru na 300px, tj. Prvky musí být s 300px umístěno uvnitř nádoby. Budou komprimovány v poměru 2: 1, tj. První jednotka se připojí k 200px a druhý až 100px a nové rozměry prvků bude 100Px a 200px.

Poznámka: V hodnotě můžete zadat frakční čísla, například: 0.5 - Flex-Shrink: 0.5

Nastaví základní šířku prvku - šířka před vypočítáním zbývajících podmínek ovlivňujících šířku prvku. Hodnota může být specifikována v PX, EM, REM,%, VW, VH atd. Závěrečná šířka bude záviset na šířce základny a hodnotám flex-růst, Flex-Shrink a obsah uvnitř bloku. S AUTO, prvek přijímá základní šířku vzhledem k obsahu uvnitř IT.

Výchozí hodnota: Auto.

Někdy je lepší instalovat šířku prvku pevně přes obvyklou vlastnost šířky. Například šířka: 50%; To bude znamenat, že prvek uvnitř kontejneru bude přesně 50%, nicméně bude fungovat vlastnosti Flex-Grow a Flex-Shrink. To může být nutné, když je prvek natažen obsahem uvnitř It, více specifikovanější v flex-bázi. Příklad.

flex-base bude "tvrdý", pokud resetuje tahová a komprese: flex-základ: 200px; Flex-růst: 0; Flex-Shrink: 0; . To vše může být napsáno jako flex: 0 0 200px; .

Krátký záznam tří vlastností: Flex-růst Flex-Shrink-base.

Výchozí hodnota: Flex: 0 1 Auto

Můžete však určit jeden a dva hodnoty:

Flex: Žádný; / * 0 0 AUTO * / / * číslo * / FLEX: 2; / * Flex-růst (flex-base se jedná o 0) * / / * ne číslo * / flex: 10em; / * FLEX-BASE: 10EM * / FLEX: 30px; / * FLEX-BASE: 30PX * / FLEX: AUTO; / * FLEX-BASE: AUTO * / FLEX: Obsah; / * FLEX-BASE: Obsah * / Flex: 1 30px; / * Flex-růst a flex-based * / flex: 2 2; / * Flex-Grow a Flex-Shrink (FLEX-BASE BASE 0) * / FLEX: 2 2 10%; / * Flex-růst a Flex-Shrink a Flex-Based * / ALIGN-Já:

Umožňuje změnit vlastnost ALIGN-Položky, pouze pro samostatnou položku.

Výchozí: Z kontejneru ALIGN-APTIONS

• protáhnout se. - Prvek je natažený plnění řetězce zcela
• flex-Start. - Prvek je stisknuto na začátek řádku
• flex-end. - Prvek je stisknuto ke konci řetězce
• centrum - Prvek je vyrovnán ve středu linky

základní linie - Prvek je zarovnán základní linií textu

Umožňuje změnit objednávku (pozici, polohu) prvku v obecném řádku.

Výchozí hodnota: Objednávka: 0

Ve výchozím nastavení mají prvky objednávku: 0 a uvedeny v pořadí jejich vzhledu v kódu HTML a směr řádku. Ale pokud změníte hodnotu vlastnosti objednávky, budou položky vybudovány v pořadí hodnot: -1 0 1 2 3. Pokud například jeden z položek označuje objednávku: 1, pak nejprve jdete na celou nulu, a pak prvek z 1.

Takže je možné například první prvek, který se zapne do konce, a zároveň se mění směr pohybu jiných prvků nebo HTML kódu.

Poznámky

Jaký je rozdíl mezi flex-základem šířky?

Pod důležitými rozdíly mezi flex-bázem a šířkou / výškou:

flex-based funguje pouze pro hlavní osu. To znamená, že při směru flex: řádek Flex-base řídí šířku (šířku) a při směru ohnutí: Ovládá sloupec výšku (výška). .

flex-base se vztahuje pouze na Flex Elements. Pokud tedy vypnete flex v kontejneru, tato vlastnost nebude mít efekt.

Absolutní prvky kontejneru se neúčastňují design flex designu ... a proto flex-base nemá vliv na prvky kontejneru FLEX, pokud jsou naprosto umístěny: absolutní. Budou muset specifikovat šířku / výšku.

• Při použití hodnot Flex Vlastnosti 3 (Flex-Grow / Flex-Shrink / Flex-Flox-Flox), můžete kombinovat a psát krátký a šířka růst nebo zmenšit, musíte psát odděleně. Například: Flex: 0 0 50% \u003d\u003d Šířka: 50%; Flex-Shrink: 0; . Někdy je to jen nepohodlné.

Pokud je to možné, stále dávají preferenci flex-bázi. Použijte šířku pouze v případě, že flex-base není vhodný.

Rozdíly flex-základ z šířky - bug nebo fich?

Obsah uvnitř elementu FLEX ji řepá a nemůže jít mimo své limity. Pokud však nastavíte šířku přes šířku nebo maximální šířku, a ne flexibilní, prvek uvnitř kontejneru FLEX bude moci překračovat tento kontejner (někdy potřebujete toto chování). Příklad:

Příklady rozložení flex

V příkladech, kdekoli používá předpony pro křížový prohlížeč. Udělal jsem to pro pohodlné čtení CSS. Proto viz nejnovější příklady. verze chrome. nebo firefox.

# 1 Jednoduchý příklad s vertikální vyrovnání a horizontální

Začněme s nejjednodušším příkladem - vyrovnání svisle a vodorovně současně a v jakékoliv výšce bloku, dokonce gumy.

Nebo tak, bez bloku uvnitř:

# 1.2 separace (mezera) mezi prvky bloku flex

Chcete-li umístit prvky kontejneru na okrajích a libovolně vyberte prvek, po kterém bude přestávka, musíte použít vlastnost Left: Auto nebo Margin-vpravo: Auto.

# 2 adaptivní menu na flex

Proveďte nabídku v horní části stránky. Na širokém obrazovce musí být správné. V průměru, v souladu se středem. A na malém prvku by měl být na novém řádku.

# 3 adaptivní 3 sloupce

Tento příklad ukazuje, jak rychle a pohodlně provádět 3 sloupce, které při zúžení se změní na 2 a pak v 1.

Upozorňujeme, že to lze provést bez použití pravidel médií, vše na flex.

Přejít na jsfiddle.net a změnit šířku sekce "výsledku"

# 4 Adaptivní bloky na flex

Předpokládejme, že musíme stáhnout 3 bloky, jeden velký a dva malé. Současně je nutné, aby bloky zapadly do malých obrazovek. Udělat:

Přejít na jsfiddle.net a změnit šířku sekce "výsledku"

# 5 galerie na flex a přechod

Tento příklad ukazuje, jak rychle můžete udělat hezký okordeon s obrázky na Flex. Věnujte pozornost transformačnímu majetku pro flex.

# 6 Flex v Flex (jen příklad)

Úkol pružný blok. Takže začátek textu v každém bloku byl na stejné vodorovné čáře. Ty. S šířkou šířky, bloky rostou ve výšce. Je nutné, aby obrázek je nahoře, tlačítko je vždy v přízemí a text ve středu začal na jedné vodorovné čáře ...

Pro vyřešení tohoto problému se bloky samotné jsou nataženy pomocí FLEX a je instalována maximální možná šířka. Každá vnitřní jednotka je také flex s konstrukcí, sloupec směru flex: sloupec; a prvek ve středu (kde je text umístěn) je natažený flex-růst: 1; Chcete-li vyplnit všechny volné místo, výsledek je dosažen - text začal jedním řádkem ...

Další příklady

Podpora prohlížeče - 98,3%

Samozřejmě neexistuje úplná podpora, ale všechny moderní prohlížeče Podpora návrhů FlexBoxu. Pro některé potřebujete ještě určit předpony. Pro skutečný obraz, podívejte se do Caniuse.com a zjistěte, že 96,3% použitého prohlížeče dnes bude fungovat bez předpon, s předponami 98,3%. To je skvělý indikátor, aby se odvážně použil flexbox.

Chcete-li vědět, jaké předpony jsou dnes relevantní (červen 2019), uvádím příklad všech pravidel flex nezbytné předpony:

/ * Kontejner * / .Flex (zobrazení: -webkit-box; zobrazení: -ms-flexbox; zobrazení: flex; zobrazení: -webkit-inline-box; displej: -MS-inline-flexbox; displej: inline-flex; -Webkit-box-orient: vertikální; -webkit-box směr: normální; -MS-otočná směr: sloupec; směru flex: sloupec; -ms-Flex-Wrap: Wrap; Flex-Flex-Wrap: Balno; -Flex-tok: Sloupový zábal; Flex-flow: Sloupový zábal; -webkit-box-pack: ospravedlnění; Distribuce; \u200b\u200bZarovnat obsah: prostor-kolem;) / * Prvky * / .flex-Položka (-webKit-box-Flex: 1; Negativní: 2; Flex-Shrink: 2; -MS-Flex-Preferovane-Velikost: 100px; Flex-based: 100px; -ms-Flex: 1 2 100px; FLEX: 1 2 100PX; -MS-FLEX-Položka : CENTER; ALIGN-SELF: CENTER; -WebKit-box-order-Skupina: 3; -MS-flex-pořadí: 2; Objednávka: 2;)

Je lepší, pokud vlastnosti s předpony půjdou na původní vlastnost.
Dnes neexistují žádné zbytečné (podle caniuse) předpony (podle caniuse), ale obecně prefixy více.

• (New) - Nová syntaxe: Displej: Flex; .
• (Tweener) - Stará neoficiální syntaxe 2011: Displej: FlexBox; .
• (Starý) - Stará syntaxe 2009: Displej: Box;

Video

No, nezapomeňte na video, někdy je to také zajímavé a srozumitelné. Zde je pár populárních:

Užitečné odkazy pro flex

flexBoxFrogGy.com - FlexBox vzdělávací hra.

Flexplorer je návrhář kódu vizuálního flexa.