Plné CSS FlexBox Průvodce. to plný průvodce Vysvětluje vše o FlexBoxu, se zaměřuje na všechny možné vlastnosti pro rodičovský prvek (Flex Containal) a podřízené prvky (Flex Elements). Zahrnuje také historii, demonstraci, šablony a tabulku podpory prohlížeče.
Pozadí.
flex-tok (aplikovaný na: rodičovský prvek Flex-kontejner)
Toto je snížení směřování ohybu. a flex-wrap. Vlastnosti, které společně určují základní a příčné osy kontejneru FLEX. Výchozí hodnota je Řada Nowrap..Flex-tok:<‘flex-direction’> || <‘flex-wrap’>
ospravedlnit-obsah
Tato vlastnost určuje zarovnání podél hlavní osy. Pomáhá distribuovat další zbytky volného prostoru, někdy všechny Flex Elements v řetězci nepružných nebo flexibilních, ale dosáhl své vlastní maximální velikost. Poskytuje také určitou kontrolu nad vyrovnáním prvků, když přemohli linku.
Kontejner (ospravedlnit-obsah: Flex-Start | Center | Space-mezi | Space-kolem | Space-rovnoměrně | start | konec | vlevo | vpravo ... + bezpečný | nebezpečný;)
- flex-Start. (Výchozí): Prvky jsou posunuty na začátek směru směru flexe.
- flex-konec.Prvky jsou posunuty blíže ke konci směru pružnosti.
- start.: Prvky se posunuly na začátek režimu psaní. Pokyny.
- konec.: Prvky posunuté na konci režimu psaní. Pokyny.
- vlevo, odjet.: Prvky jsou posunuty směrem k levému okraji kontejneru, pokud nedává smysl směřování ohybu.Pak se chová start..
- Že jo: Prvky jsou posunuty směrem k pravému okraji nádoby, pokud nedává smysl směřování ohybu.Pak se chová start..
- centrum: Prvky jsou vycentrovány podél linie
- prostor mezi.: Prvky jsou rovnoměrně rozloženy přes linku; První prvek je na začátku řádku, poslední prvek na konci řetězce
- prostor-kolem.: Prvky jsou rovnoměrně rozloženy přes linku se stejným prostorem kolem nich. Všimněte si, že vizuálně prostory nejsou stejné, protože všechny prvky mají stejný prostor na obou stranách. První prvek bude mít jednu jednotku prostoru naproti okraji kontejneru, ale dva jednotky prostoru mezi dalším prvkem, protože další položka má svůj vlastní interval, který je aplikován.
- space-rovnoměrně: Prvky jsou distribuovány tak, že vzdálenost mezi dvěma prvky (a vzdáleností k okrajům) byla stejná.
Existují také dvě další klíčová slova, která můžete s těmito hodnotami spojit: bEZPEČNÝ a nebezpečný. Použitím bEZPEČNÝ Zajišťuje, že bez ohledu na to, jak tento typ polohování provedete, nebudete moci najít položku takovým způsobem, že se zobrazí mimo obrazovku (například nahoře) tak, aby byl obsah také posouván (například To se nazývá "ztráta dat").
zarovnat položky.
Tato nemovitost určuje výchozí chování, jak jsou flex skupiny umístěny podél příčné osy na aktuálním řádku. Přemýšlejte o tom jako ospravedlnit-obsahovou verzi pro příčnou osu (kolmá hlavní osa).
Kontejner (ALIGN-Položky: Stretch | Flex-Start | Center | Center | Baseline | První základní linie | Poslední základní linie | Start | Konec | Self-start | Self-end + ... Safe | nebezpečný;)
- protáhnout se. (Výchozí): Stretch pro vyplnění kontejneru (stále dodrženo min-šířky / max-šířka)
- flex-Start. / start. / self-start.: Prvky jsou umístěny na začátku příčné osy. Rozdíl mezi nimi je malý a spočívá v souladu směřování ohybu. Pravidla OR. režimu psaní. pravidla.
- flex-konec. / konec. / vlastní konec.: Prvky jsou umístěny na konci příčné osy. Rozdíl je opět tenký a spočívá v souladu směřování ohybu. nebo režimu psaní. pravidla.
- centrum: Prvky jsou vycentrovány přes příčnou osu
- základní linie: Prvky jsou zarovnány podle jejich základní linie
zarovnat obsah
Tato vlastnost řádky linky v kontejneru FLEX, pokud je na příčné ose další prostor, stejně jako ospravedlnit-obsah Vyrovnává jednotlivé prvky v hlavní ose.
Poznámka: Tato vlastnost nefunguje, když existuje pouze jedno řádkové flex skupiny.
Kontejner (Zarovnat obsah: Flex-Start | Center | Space-mezi | Space-kolem | Space-rovnoměrně | Stretch | Start | End | Baseline | první základní linie | Poslední základní linie + ... bezpečné | nebezpečný;)
- flex-Start. / start.: Prvky se posunuty na začátek kontejneru. Více podporovatelnější flex-Start. použití směřování ohybu. zatímco start. Použití režimu psaní. směr.
- flex-konec. / konec.: Prvky se posunuty na konec kontejneru. Více podporovatelnější flex-konec. Použití směřování ohybu. zatímco konec. Použití režimu psaní. směr.
- centrum: Prvky jsou v centru v nádobě zarovnány
- prostor mezi.: Prvky jsou rovnoměrně distribuovány; První řádek je na začátku kontejneru a druhý - na konci
- prostor-kolem.: Prvky jsou rovnoměrně distribuovány s rovnou velikostí kolem každého řádku.
- space-rovnoměrně: Prvky jsou rovnoměrně distribuovány, stejný prostor kolem nich
- protáhnout se. (výchozí): řádky jsou nataženy pro obsazení zbývajícího prostoru
Vlastnosti pro první dceřiné společnosti (Flex Elements)
objednat
Ve výchozím nastavení jsou Flex Elements umístěny v původním pořadí. Nicméně, vlastnost objednat Řídí pořadí jejich vzhledu v kontejneru FLEX.
Položka (Objednávka:
flex-růst.
Tato vlastnost určuje schopnost flex elementu, aby se v případě potřeby protáhnout. Trvá nulovou hodnotu, která slouží jako poměr. Tento majetek, kolik z dostupného prostoru uvnitř pružné nádoby by mělo zabírat prvek.
Pokud pro všechny položky flex-růst. Je stanovena hodnota 1, zbývající prostor v kontejneru bude rovnoměrně rozdělen mezi všechny podřízené prvky. Pokud má jeden z podřízených prvků hodnotu 2, tento prvek trvá dvakrát více místa než zbytek (nebo zkuste alespoň).
Položka (Flex-Grow:
flex-Shrink.
Tato vlastnost určuje schopnost pružného prvku v případě potřeby komprimovat.Položka (Flex-Shrink:
Negativní čísla nejsou podporována.
flex-základ.
Tato vlastnost určuje výchozí velikost prvku před distribucí zbývajícího prostoru. Může být délka (například 20%, 5rem atd.) Nebo klíčové slovo. Klíčové slovo aUTO. Znamená "podívat se na vlastnictví mé šířky nebo výšky." Klíčové slovo obsah znamená "velikost na základě obsahu prvku" - toto klíčové slovo ještě není příliš dobře podporováno, takže je těžké zkontrolovat, že se pro ni používá max-obsah, min-obsah. nebo fit-obsah.Položka (Flex-base:
Je-li nastaveno sada 0
Dodatečný prostor kolem obsahu není zohledněn. Je-li nastaveno sada aUTO.Dodatečný prostor je distribuován v závislosti na jeho flex-růst. hodnoty.
Viz tento výkres.
ohebný
Toto je snížení pro použití. flex-růst., flex-Shrink. a flex-základ. spolu. Druhé a třetí parametry ( flex-Shrink. a flex-základ.) jsou volitelné. Výchozí hodnota je 0 1 aUTO..Položka (flex: Žádný |<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}
Doporučuje se použít tuto zkratku.a neinstalovat samostatné vlastnosti. Toto snížení inteligentně nastavuje další hodnoty.
zarovnat sebe.
Tato vlastnost umožňuje přepsat výchozí zarovnání (nebo zadané zarovnat položky.) Pro jednotlivé prvky flex.
Prosím podívej se zarovnat položky. Vlastnost pochopit dostupné hodnoty.
Položka (ALIGN-SELF: AUTO | AUTO | FLEX-START | CENTRESS CENTER | Baseline | Stretch;)
Všimněte si, že vlastnosti plovák, průhledná a vertikální-align. Nemají vliv na elementy flex.
Příklady
Začněme s velmi jednoduchým příkladem, řešením téměř každodenního problému: dokonalé centrování. Nejjednodušší řešení pro tento úkol je použít FlexBox.Rodič (displej: flex; výška: 300px; / * nebo cokoliv * /) .child (šířka: 100px; / * nebo cokoliv * / výška: 100px; / * nebo cokoliv * / margin: auto; / * magie! * / )
To se děje v důsledku skutečnosti, že vlastnost vertikální vyrovnání okraje instalovaného v aUTO. V kontejneru FLEX absorbuje další prostor. Tak, instalace marže v aUTO. Udělejte objekt dokonale soustředěný na obou osách.
Použijte některé další vlastnosti. Zvažte seznam 6 prvků, vše s pevnou velikostí, ale tam mohou být avtommery. Chceme, aby byli rovnoměrně rozděleni podél horizontální osy, takže při změně velikosti prohlížeče je vše v pořádku a bez žádostí o médii.
Flex-Container (/ * Nejdříve Vytváříte kontext FLEX * / DISPLAY: FLEX; / * Definujeme směr FLEX a umožňujeme přepnout položky na nové čáry * Nezapomeňte, že toto je stejné jako: * Flex-Směr: * Řada; * Flex-Wrap: Wrap; * / Flex-tok: Řádkový zábal; / * Pak definujeme, jak je zbývající prostor distribuován * / Opravný obsah: prostor-kolem;)
Připraven. Všechno ostatní je jen styling.
Pokud změníte rozlišení obrazovky, zda je měřítko, bude to takto:
Zkusme něco jiného. Představte si, že jsme zarovnali se správným okrajem navigačních prvků v horní části našich webových stránek, ale chceme, aby byli zarovnáni na šířku na středně velkých obrazovkách a nacházejí se v jednom sloupci malá zařízení. Je to dost jednoduché.
/ * Velké obrazovky * / .Navigation (displej: Flex; Flex-Flow: Řádkový zábal; / * Řádky prvků do konce čáry na konci řádku na hlavní ose * / Opatření-obsah: Flex-End;) / * Médium Obrazovky * / @ @ média Všechny a (max-šířka: 800px) ( / * Malé obrazovky * / @Media All a (max-šířka: 500px) (.Navigation (/ * na malých obrazovkách, již používáme směr řádku, ale používáme sloupec * / Flex-Směr: sloupec;))
Velké obrazovky
Střední obrazovky
Malé obrazovky
Zkusme něco ještě lépe, hrát si s flexibilitou Flex Elements! Jak přibližně 3-sloupec rozložení v plné výšce stránky s záhlaví a zápatí. A nezávisí na počátečním pořadí prvků.
Wrapper (Display: Flex; Flex-Flow: Řádkový zábal;) / * Říkáme, že všechny prvky jsou 100% šířky, přes flex-base * / .wrapper\u003e * (flex: 1 100%;) / * Používáme Source Objednat pro první mobilní verzi * 1. Záhlaví * 2. ČLÁNEK * 3. Kromě 1 * 4. Kromě 2 * 5. Zápatí * / / * Střední obrazovky * / @Media All a (min-šířka: 600px) * Říkáme, že oba boční panely stojí v jednom řádku * / .aside (flex: 1 Auto;)) / * Velké obrazovky * / @Media All a (min-šířka: 800px) (/ * Invertujeme pořadí prvního boční panel a hlavní a říkají hlavní prvek, takže slouží polovině šířky než dvě další boční panely * / .main (flex: 2 0px;) .aside-1 (pořadí: 1;) .main (pořadí: 2; ) .aside-2 (pořadí: 3;) .Footer (pořadí: 4;))
@mixin FlexBox () (zobrazení: -webkit-box; zobrazení: -Moz-box; displej: -MS-FlexBox; Display: -WebKit-Flex; Display: Flex;) @Mixin Flex ($ Hodnoty) (-webkit Box -Flex: Hodnoty $, -Moz-box-flex: $ hodnoty; -webkit-flex: $ hodnoty; -ms-flex: $ hodnoty; flex: $ hodnoty;) @Mixin pořadí ($ val) (-webkit box- Ordinal-Skupina: $ val; -moz-box-order-group: $ val; -ms-flex-order: $ val; -webkit-pořadí: $ val; Objednávka: $ val;). );) .Tem (@include Flex (100px); @include pořadí (2);)
Chyby
FlexBox, samozřejmě, ne bez chyb. Nejlepší sbírka z nich, kterou jsem viděl, je FlexBugs Philip Walton a Greg Enorted. Je to open source repozitář, aby všechny z nich sledoval, takže si myslím, že je nejlepší odkazovat na něj.
Podpora v prohlížečích
FlexBox je přerušen pomocí "verze" FlexBox:- (Nové) znamená nedávnou syntaxi ze specifikace (například displej: Flex;)
- (Tweener) znamená podivnou neoficiální syntaxi od roku 2011 (například displej: FlexBox;)
- (Starý) znamená starou syntaxi od roku 2009 (například displej: Box;)
BlackBerry Browser 10+ podporuje novou syntaxi.
Pro získání pro více informací Jak míchat syntaxe pro získání lepší podpory prohlížeče, viz
Specifikace flexbox (flexibilní modul rozložení krabic) - To je způsob umístění prvků v horizontálních nebo vertikálních směrech.
FlexBox kombinuje sadu vlastností pro rodičovskou kontejner Flex a pro dceřiné společnosti Flex Elements.
Takže prvek se stane flex kontejnerem, musí být přiřazen displej: Flex; nebo displej: inline-flex; (blok nebo malá písmena).
Uvnitř kontejneru FLEX jsou vytvořeny dvě osy: hlavní a kolmá příčná. Za prvé, prvky ohybu jsou postaveny na hlavní ose, a pak na příčné.
Vlastnosti kontejneru FLEX |
|
| směřování ohybu. | Určuje směr hlavní osy. Možné hodnoty:
|
| flex-wrap. | Určuje víceřádkový kontejner. Možné hodnoty:
|
| flex-tok. | Určuje dva parametry najednou: Flex-směr a Flex-Wrap. Například flex-flow: Sloupový zábal; |
| ospravedlnit-obsah | Určuje vyrovnání prvků na hlavní ose. Možné hodnoty:
|
| zarovnat položky. | Určuje vyrovnání prvků na příčné ose. Možné hodnoty:
|
| zarovnat obsah | Určuje vyrovnání celých řádků flex-prvků na příčné ose. Možné hodnoty:
Tato vlastnost nefunguje pro jednořádkové flexní kontejner. |
Vlastnosti flex-prvků |
|
| objednat | Určuje pořadí jednotlivého flex elementu uvnitř kontejneru FLEX. Nastaví celé číslo. Výchozí hodnota je 0, pak se prvky navzájem následují v pořadí přirozeného toku. Hodnota objednat Nastaví hmotnost polohy prvku v sekvenci, a ne absolutní polohu. |
| flex-základ. | Určuje velikost základny elementu Flex před rozložením prostoru v nádobě. Lze jej specifikovat v px,%, EM a dalších měrcích. Ve skutečnosti je to druh výchozího bodu, s ohledem na to, ke kterému se táhne nebo stlačuje prvek. Výchozí hodnota - aUTO.Současně závisí velikost prvku na velikosti interního obsahu. |
| flex-růst. | Určuje, kolik volného místa uvnitř kontejneru přidává element Flex na základní velikost. Nastaví celé číslo, které slouží jako poměr. Výchozí hodnota je 0. Pokud mají všechny položky flex-Grow: 1Všechny budou stejné velikosti. Pokud je jeden flex-element nastaven na hodnotu 2, pak bude přidán dvakrát tolik k jeho základní velikosti než do druhé. |
| flex-Shrink. | Určuje, kolik flex elementu vzhledem k poklesu sousedních prvků v rámci kontejneru Flex se sníží v případě nedostatku prostoru. Nastaví celé číslo, které slouží jako poměr. Ve výchozím nastavení 1. Pokud jeden element FLEX nastaví hodnotu flex-Shrink: 2Z jeho základní velikosti bude dvakrát tolik, kolik je, pokud je nádoba menší než množství základních velikostí prvků uvedených v něm. |
| ohebný | Určuje tři parametry najednou: Flex-Grow, Flex-Shrink, Flex-Based. Například oheň: 1 1,200px; |
| zarovnat sebe. | Předefinuje výchozí zarovnání nebo v zarovnat položky.Pro konkrétní flex element. Možné hodnoty:
|
Vlastnosti používání flexibře v praxi
1. Zarovnání na pravém okraji
Obsah:
FlexBox. - To je nový způsob, jak umístit bloky na stránce. Toto je technologie vytvořená přesně pro rozložení prvků, na rozdíl od plováku. Přes FlexBox. Prvky můžete snadno vyrovnat vodorovně a svisle, změnit směr a objednat zobrazení prvků, protáhnout bloky do celé výšky rodiče nebo je vyživovat na spodní okraj.
Upd od 02.02.2017: Udělal pohodlný podvádět list na Flexboxam, s Alive Demos a popisy od Speki: Flexbox Cheatsheet.
Příklady používají pouze novou syntaxi. V době psaní článku správně zobrazují Chrom.. Firefox práce zčásti, v safari - nefungují vůbec.
Podle webu Caniuse.com, FlexBox. 8 a 9. IE a Opera Mini nejsou podporovány a v jiných prohlížečích nejsou požadovány všechny vlastnosti a / nebo předpony.
To znamená, že technologie nemůže být široce používána právě teď, ale je čas poznat ji blíže.
Nejprve musíte vědět, že flex skupiny jsou umístěny na osách. Ve výchozím nastavení jsou prvky vodorovně - spolu hlavní osa - hlavní osa.
Mělo by být také třeba mít na paměti, že při použití FlexBox. Pro vnitřní bloky, float, jasný a vertikální zarovnání nefungují, stejně jako vlastnosti, které určují reproduktory v textu.
Připravte mnohoúhelník pro experimenty:
Jeden rodičovský blok (žlutá) a 5 dceřiných společností.
Displej: Flex.
A nyní přidejte displej: ohněte se na rodičovský prvek; . Interní Divs jsou zabudovány do řady (podél hlavní osy) stejných výškových sloupců, bez ohledu na obsah.
displej: Flex; Dělá všechny dceřiné prvky s gumou - flex, a ne inline nebo blok, jak bylo původně.
Pokud rodičovský blok obsahuje obrázky nebo text bez obalů, stávají se anonymními prvky flex.
Zobrazení vlastností pro. \\ T FlexBox. může mít dva významy:
flex - chová se jako blokový prvek. Při výpočtu šířky bloků, prioritu na rozložení (s nedostatečnou šířkou bloků se obsah může dostat z hranic).
inline-flex - chová se jako inline blok. Priorita obsahu (obsah se rozprostírá bloky na požadovanou šířku čáry, pokud je to možné, fit).
Směřování ohybu.
Směr rozložení bloku je řízen vlastností Flex-Směr.
Možné hodnoty:
Řádek - řetězec (výchozí hodnota); Řádek-reverzní - řádek s prvky v opačném pořadí; sloupec - sloupec; Sloupec-reverzní - sloupec s prvky v opačném pořadí.
Řádek a řádek
sloupec a sloupec-reverzní
Flex-wrap.
V jednom baru může být mnoho bloků. Jsou převedeny nebo ne definují vlastnost Flex-Wrap.
Možné hodnoty:
nowrap - bloky nejsou převedeny (výchozí hodnota); Zabalení - bloky jsou přeneseny; Wrap-reverzní bloky jsou přeneseny a umístěny v opačném pořadí.
Pro krátkodobý záznam o vlastnostech směru flex a flex-zábal, existuje vlastnost: flex-flow.
Možné hodnoty: Můžete nastavit oba vlastnosti nebo pouze jeden. Například:
flex-tok: sloupec; Flex-tok: obal; Flex-tok: Sloupec-reverzní zábal;
Demo pro řádek-reverzní wrap-reverzní:
Objednat
Chcete-li spravovat pořadí bloků, použije se vlastnost objednávky.
Možné hodnoty: čísla. Dát blok nejprve, zeptejte se ho objednat: -1:
Ospravedlnit-obsah
Existuje několik vlastností pro vyrovnání prvků: ospravedlnit-obsah, sladit položky a zarovnat sebe.
ostatní odůvodnění obsahu a zarovnání jsou aplikovány na rodičovskou kontejner, zarovnat sebe - do dceřiné společnosti.
ostatní obsah je zodpovědný za zarovnání podél hlavní osy.
Možné hodnoty odůvodnění obsahu:
flex-Start - prvky jsou zarovnány od začátku hlavní osy (výchozí hodnota); Flex-end - prvky jsou vyrovnány z konce hlavní osy; Centrum - prvky jsou vyrovnány ve středu hlavní osy; Prostor mezi prvky jsou vyrovnány podél hlavní osy, rozdělující volný prostor; Prostor-kolem - prvky jsou vyrovnány podél hlavní osy, distribuují volné místo kolem sebe.
flex-Start a Flex-End
prostor mezi, vesmírný
Zarovnat položky.
zarovnat položky jsou zodpovědné za zarovnání kolpendární osou.
Možné alignové položky:
flex-start - prvky jsou vyrovnány od začátku kolmé osy; Flex-end - prvky jsou vyrovnány z konce kolmé osy; Centrum - prvky jsou v centru zarovnány; Základní - prvky jsou vyrovnány základní linií; Stretch - prvky jsou nataženy, zabírají celý prostor kolmou osou (výchozí hodnota).
flex-Start, Flex-End
základní linie, strie
Zarovnat sebe.
aLIGN-JACKO je také zodpovědný za vyrovnání kolmé osy, ale je uveden samostatnými prvky flex.
Možné hodnoty ALIGN-JACK:
auto - výchozí hodnota. Znamená, že prvek používá alignové předměty rodičovského prvku; Flex-Start - Prvek je vyrovnán od začátku kolmé osy; Flex-end - prvek je vyrovnán z konce kolmé osy; CENTER - Prvek je v centru zarovnán; Základní linie - prvek je zarovnán základní linií; Stretch - Prvek je natažen, zabírá veškerý prostor ve výšce.
Zarovnat obsah
Chcete-li regulovat zarovnání uvnitř kontejneru s víceřádkovým Flex, existuje vlastnost ALIGN-CONTENT.
Možné hodnoty:
flex-Start - prvky jsou vyrovnány od začátku hlavní osy; Flex-end - prvky jsou vyrovnány z konce hlavní osy; Centrum - prvky jsou vyrovnány ve středu hlavní osy; Prostor mezi prvky jsou vyrovnány podél hlavní osy, rozdělující volný prostor; Prostor-kolem - prvky jsou vyrovnány podél hlavní osy, distribuce volného prostoru kolem nich; Stretch - prvky jsou nataženy, vyplnění celé výšky (výchozí hodnota).
flex-Start, Flex-End
centrum, úsek.
prostor mezi, vesmírný
PS: Nikdy se mi nepodařilo vidět některé kusy v akci, například Flex-Flow: Sloupový zábal nebo plný příspěvek Stejný směr Flex: sloupec; Flex-Wrap: Wrap; .
Prvky jsou sloupec, ale nejsou převedeny:
Wrap nefunguje při směru flex: sloupec; I když to vypadá takto v podobných specifikacích:
Myslím, že to bude pracovat s časem.
Updated Dated 21.06.2014: Vše funguje, pokud nastavíte výškový blok. Pro tip Děkuji
Ahoj, Habr!
Jeden jemný večer, který nic nezajímá, náš chatik obdržel návrh od autora publikace "Transfer 5 Opravdu užitečné adaptivní vzorové vzorce", napsaný na jaře 2012, napsal článek-remake, ale používat FlexBox a doprovodné vysvětlení i práce. Po určitém podílu pochybností, zájem pochopit specifikaci více hlouběji a já jsme vyhráli nejvíce příklady bezpečně. Během ponoru do této oblasti začalo zjistit mnoho nuancí, které se změnilo v něco víc, než jen překlopit maquetters. Obecně platí, že v tomto článku chci říct o takové nádherné specifikaci, nazvaný "CSS flexibilní box rozložení modulu" a ukázat některé z jeho zajímavých vlastností a příklady aplikace. Všichni, kdo mají zájem, laskavě pozvavují k harkavu.
Co bych rád věnoval pozornost rozložení Laouta na FlexBox, vývojář bude vyžadovat určitý stupeň adaptace. Ve svém vlastním příkladu jsem se cítil, že mnoho let zkušeností hraje nadšený vtip. FlexBox vyžaduje malou jinou myšlenku stavebních prvků v proudu.
Technická část
Před přechodem na některé příklady stojí za pochopení, které vlastnosti jsou zahrnuty v této specifikaci a jak fungují. Protože některé z nich nejsou zpočátku příliš jasné, a někteří jsou obklopeni mýty, které nejsou jako sebemenší vztah.Tak. FlexBox má dva hlavní typy předmětů: Flexibilní kontejner (Flex Containal) a jeho podřízené prvky jsou flexibilní položky (FLEX položka). Inicializace kontejneru je dostačující pro přiřazení přes CSS, položka displej: Flex; nebo displej: inline-flex;. Rozdíl mezi flex a inline-FLEX je pouze v principu interakce s prvky okolní kontejner, jako je zobrazení: blok; a zobrazit: inline-blok;, resp.
Uvnitř pružné nádoby jsou vytvořeny dvě osy, hlavní osa (hlavní osa) a kolmá nebo křížová osa (křížová osa). Většinou pružné prvky jsou postaveny na hlavní ose a pak na křížové ose. Ve výchozím nastavení je hlavní osa vodorovná a má směr zleva doprava a křížová osa vertikální a směřuje shora dolů.
Osy mohou být řízeny pomocí vlastností CSS směřování ohybu.. Tato vlastnost má řadu hodnot:
Řádek (Výchozí): Hlavní osa pružného kontejneru má stejnou orientaci jako inline osa proudu směru řádků. Začátek (hlavní start) a směry konečného (hlavní konec) hlavní osy odpovídají počátečnímu (inline-start) a konec (inline-end) inline osy (inline osa).
Řádek.: Všechna stejná jako v řadě pouze hlavní start a hlavní konec změn.
sloupec.: Také, stejně jako řádek, teprve nyní je hlavní osa směřována shora dolů.
sloupec-reverzní.: Také sám jako řádek, pouze hlavní osa je směrována ze dna nahoru.
Jak to funguje, lze zobrazit v příkladu na jsfiddle.
Ve výchozím nastavení jsou všechny pružné prvky v kontejneru naskládány v jednom řádku, i když nejsou umístěny v kontejneru, jdou za hranicemi. Toto chování přepínače pomocí vlastnosti. flex-wrap.. Tato nemovitost má tři státy:
nowrap. (Výchozí): Flexibilní prvky jsou zabudovány do jednoho řádku zleva doprava.
zabalit.: Flexibilní prvky jsou postaveny v multi-line režimu, přenos se provádí ve směru křížové osy, shora dolů.
obal.: stejně jako zábal, ale přenos se odehrává zdola.
Díváme se příklad.
Pro pohodlí je k dispozici další nemovitost flex-tok.kde můžete současně určit směřování ohybu. a flex-wrap.. Vypadá to takto: flex-tok:
Prvky v kontejneru mohou být zarovnány pomocí vlastnosti. ospravedlnit-obsah Podél hlavní osy. Tato nemovitost trvá až pět různých variant hodnot.
flex-Start. (Výchozí): Flexibilní prvky jsou zarovnány v horní části hlavní osy.
flex-konec.: Prvky jsou vyrovnány do konce hlavní osy
centrum: Prvky jsou vyrovnány ve středu hlavní osy.
prostor mezi.: Prvky zabírají celou dostupnou šířku v kontejneru, extrémní prvky jsou těsně přitlačeny k okrajům nádoby a volný prostor je rovnoměrně rozdělen mezi prvky.
prostor-kolem.: Flexibilní prvky jsou zarovnány tak, že volný prostor je rovnoměrně rozdělen mezi prvky. Ale stojí za zmínku, že prostor mezi okrajem kontejneru a extrémními prvky bude dvakrát menší než prostor mezi prvky uprostřed řádku.
Samozřejmě zvolte příklad této vlastnosti.
To není vše, máme také schopnost vyrovnat prvky na křížové ose. Použití vlastnosti zarovnat položky.Který také přijímá pět různých hodnot, můžete dosáhnout zajímavého chování. Tato vlastnost umožňuje zarovnat prvky v řádku vzájemně k sobě.
flex-Start.: Všechny položky stisknuty na začátek řádku
flex-konec.: Prvky jsou stisknuty proti konci řetězce
centrum: Prvky jsou vyrovnány ve středu linky
základní linie: Prvky jsou vyrovnány základní text
protáhnout se. (Výchozí): Prvky jsou natažené plnění zcela řetězce.
Další podobný majetek na předchozí zarovnat obsah. Pouze je zodpovědný za vyrovnání celých linek vzhledem k pružné nádobě. To nebude mít účinek, pokud flexibilní prvky zabírají jeden řádek. Tato nemovitost trvá šest různých hodnot.
flex-Start.: Všechny řádky jsou stisknuty na začátek křížové osy.
flex-konec.: Všechny linky jsou stisknuty směrem ke konci kříže.
centrum: Všechny linky jsou lemovány ve středu křížové osy
prostor mezi.: Linky jsou distribuovány z horního okraje dole, takže volný prostor mezi řádky, extrémní čáry jsou lisovány směrem k okrajům kontejneru.
prostor-kolem.: Linky jsou rovnoměrně distribuovány přes kontejner.
protáhnout se. (Default): Linky Stretch zabírající veškerý dostupný prostor.
Vyzkoušejte, jak v tomto příkladu funguje alignové položky a obsah alignů. Specificky jsem prezentoval dvě z těchto vlastností v jednom příkladu, protože komunikují poměrně pevně každý výkon svého úkolu. Všimněte si, co se stane, když jsou položky umístěny v jednom řádku a v několika.
Flexibilní parametry kontejneru přišly ven, zbytuje se vypořádat s vlastnostmi pružných prvků.
První majetek, se kterými se s tím setkáme objednat. Tato vlastnost umožňuje změnit polohu v proudu na konkrétní prvek. Ve výchozím nastavení mají všechny flexibilní prvky objednávka: 0; a jsou postaveny v pořadí přirozeného toku. V příkladu můžete vidět, jak se prvky změní, pokud jsou pro ně použity různé hodnoty objednávky.
Jednou z hlavních vlastností je flex-základ.. Pomocí této vlastnosti můžeme specifikovat základní šířku pružného prvku. Výchozí hodnota je aUTO.. Tato vlastnost je úzce spjata flex-růst. a flex-Shrink.které řeknu o něco později. Vezme hodnotu šířky v px,%, em a dalších jednotkách. Ve skutečnosti to není striktně šířka pružného prvku, je to druh výchozího bodu. S ohledem na to, co se táhne nebo smrštění položky. V režimu AUTO, prvek přijímá základní šířku vzhledem k obsahu uvnitř IT.
flex-růst. Na několika zdrojech má zcela nesprávný popis. Říká se, že údajně stanoví poměr velikosti prvků v kontejneru. Ve skutečnosti to není. Tato vlastnost nastavuje faktor zvýšení elementu v přítomnosti volného místa v kontejneru. Ve výchozím nastavení má tato vlastnost hodnotu 0. Představme si, že máme pružnou nádobu, která má šířku 500px, uvnitř toho existují dvě flexibilní prvky, z nichž každá má základní šířku 100px. Kontejner tedy zůstane další volný prostor 300px. Pokud zadáte první prvek flex-růst: 2; a druhý prvek označuje flex-růst: 1;. Výsledkem je, že tyto bloky budou mít celou dostupnou šířku kontejneru, pouze šířka prvního bloku bude 300px a druhá pouze 200px. Co se stalo? A to se stalo, že k dispozici 300px volný prostor v kontejneru rozdělené mezi prvky v poměru 2: 1, + 200px z první a + 100px sekundy. Vlastně to funguje.
Zde hladce jdeme do jiného podobného majetku, konkrétně flex-Shrink.. Výchozí hodnota je 1. Rovněž nastavuje faktor pro změnu šířky prvků, pouze v opačném směru. Pokud má nádoba šířka méně než množství základní šířky prvků, pak tato vlastnost začíná pracovat. Kontejner má například šířku 600px a prvky Flex-based 300px. Bod prvního prvku Flex-Shrink: 2; a druhý Flex-Shrink: 1; Nyní zmáčkněte kontejner na 300px. V důsledku toho je množství šířky prvků 300px více než kontejner. Tento rozdíl je distribuován v poměru 2: 1, to se vypne z prvního bloku tím, že užívá 200px a od druhého 100px. Nová velikost prvků je 100px a 200px, v prvním a druhém prvku. Pokud nastavíme Flex-Shrink na 0, pak zakazujeme, aby se zmenšil prvek na velikost menší než jeho základní šířka.
Ve skutečnosti to je velmi zjednodušený popis toho, jak to všechno funguje, takže bylo chápáno obecný princip. Podrobněji, pokud má někdo zájem, algoritmus je popsán ve specifikaci.
Všechny tři vlastnosti mohou být napsány ve zkrácené formě pomocí výrazu. ohebný. Má následující formulář:
flex:
A také můžeme psát dva více zkrácených možností, flex: Auto; a flex: Žádný;Co znamená flex: 1 1 Auto; a flex: 0 0 Auto; resp.
Poslední vlastnost pružných prvků zůstal zarovnat sebe.. Všechno je zde jednoduché, toto je stejné jako alignové položky mají kontejner, který umožňuje přepsat zarovnání pro konkrétní prvek.
Vše, unavený! Příklady přijdou!
Mysleli jsme na technické části, ukázala se docela prodloužená, ale je třeba provést. Nyní můžete jít do praktické aplikace.Během uspořádání nejvíce "pět opravdu užitečných adaptivních vzorců značení," typické situace musely být vyřešeny, s nimiž se vývojář směřuje poměrně často. S FlexBoxem je implementace těchto řešení snazší a flexibilnější.
Vezměte si všechny stejné 4. rozložení, protože Je to nejzajímavější prvky.
Chcete-li začít, označujeme hlavní šířku stránky, zarovnat ve středu, stiskněte zápatí na spodní stranu stránky. Jako vždy obecně.
Html (pozadí: #ccc; min-výška: 100%; font-face: sans-serif; displej: -webkit-flex; displej: flex; směru flex: sloupec;) tělo (marže: 0; polstrování: 0 15px ; Zobrazení: -webkit-flex; displej: flex; směru flex: sloupec; Flex: Auto;) .HEYER (šířka: 100%; max-šířka: 960px; min-šířka: 430px; okraj: 0 Auto 30px; polstrování : 30px 0 10px; Displej: -WebKit-Flex; Display: Flex; Flex-Wrap: Zabalení; Opatření-obsah: prostor-mezi; 960px; min-šířka: 430px; marže: Auto; Flex-růst: 1; box-dimenzování: hraniční box;) .footer (pozadí: # 222; šířka: 100%; max-šířka: 960px; min-šířka: 430px; Barva: #eee; Margin: Auto; Polstrování: 15px; box-dimenzování: Border-box;)
Vzhledem k tomu, že jsme for.main indikovaný flex-růst: 1; Je natažen ve všech dostupných výškách, čímž stisknete zápatí na dno. Bonus v tomto rozhodnutí je, že futurt může být nefungující výška.
Nyní nyní umístí logo a menu v záhlaví.
.logo (velikost písma: 0; marže: -10px 10px 10px 0; zobrazení: flex; flex: žádný; Zarovnat položky: centrum;) .logo: před, .logo: po (obsahu: "; zobrazení: blok; ) .logo: Předtím (pozadí: # 222; šířka: 50px; výška: 50px; marže: 0 10px 0 20px; okraj hrany: 50%;) .logo: po (pozadí: # 222; šířka: 90px; výška: 30px;) .NAV (okraj: -5PX 0 0 -5px; displej: -webkit-flex; zobrazení: flex; flex-wrap: zábal;) .NAV-itm (pozadí: # 222; šířka: 130px; výška: 50px ; Velikost písma: 1.5rem; barva: #ee; text-dekorace: žádný; marže: 5px 0 0 5px; displej: -webkit-flex; displej: flex; odůvodnění: Centrum;
Protože heder je indikován Flex-Wrap: Wrap; a ospravedlnit obsah: prostor mezi; Logo a menu se šíří přes různé strany záhlaví, s místem pro menu nebude dostačující, je elegantně posunut pod logem.
Dále vidíme velký post nebo banner, zjistím, že je těžké říci, že je to konkrétně, ale ne podstatu. Máme obrázek napravo a text s číslem vlevo. Já osobně se držet myšlenky, že jakékoli prvky by měly být tak flexibilní, jak je to možné, bez ohledu na to, zda je adaptivní dispozice nebo statické. Takže máme v tomto postranním baru, ve kterém je obraz zveřejněn, přísně řečeno, nemůžeme říci přesně, jakou šířku potřebujeme, protože dnes máme velký obrázek, zítra je malý a pokaždé na opakování prvku od nuly neochota pokaždé. Takže potřebujeme vedlejší bar, aby se místo, které potřebujete, a zbytek šel do obsahu. A udělej to:
Box (velikost písma: 1.25Rem; výška čáry: 1.5; font-styl: kurzíva; marže: 0 40px -50px; displej: -webkit-flex -50px; Display: -webkit-Flex; Display: Flex; Flex-Wrap: Zabalení; Ostatní obsah: Centrum ;) .Box-báze (vlevo vlevo) (vlevo vlevo) (okraj vlevo: 50px; oheň: 1 0 430px;) .box-strana (mezera-vlevo: 50px; flex: žádný;) .box-img (max. Šířka: 100%; výška: auto;)
Jak vidíte for.box-base, kde máme záhlaví a text, zadal jsem základní šířku pomocí prostředků flex-basage: 430px;, stejně jako zakázané smrštění bloku flex-Shrink: 0;. S touto manipulací jsme říkali, že obsah nemohl být menší než 430px v šířce. A vzhledem k tomu, že for.box uvádím flex-Wrap: Wrap; V tomto okamžiku, kdy boční tyč a obsah nebude umístěn v kontejneru. Box, boční panel se automaticky spadne pod obsah. A je to všechno bez použití @ Média.Dokázal se! Myslím, že je to opravdu velmi chladné.
Máme obsah trikola. Řešení takového úkolu jsou několik, ukážu jeden z nich, v ostatních rozvržení je další možnost.
Vytvořte kontejner, zavolejte jej .Content a nakonfigurovat.
.Content (okraj-dno: 30px; displej: -webkit-flex; displej: flex; flex-zábal: zábal;)
V kontejneru tři reproduktory, .bannery, .postroje, .comments
.bannery (flex: 1 1 200px;) .posts (marže: 0 30px 30px; flex: 1 1 200px;) .Comments (marže: 0 30px 30px; flex: 1 1 200px;)
Zadané sloupce se základní šířkou 200px tak, že reproduktory nemají příliš mnoho, nechte je lépe přenášet podle potřeby.
Na rozložení jsme s obsahem, dělat bez @ média nebude fungovat, takže budu konfigurovat chování sloupců pro šířku<800px и <600px.
Obrazovka @Media a (max-šířka: 800px) (.bannery (mezera vlevo: -30px; displej: -webkit-flex; displej: flex; flex-base: 100%;) .posts (marže vlevo: 0; )) @Media obrazovka a (max-šířka: 600px) (.content (displej: blok;) Bannery (okraj: 0; zobrazení: blok;) .bomenty (marže: 0;))
To je všechno kouzlo ohledně výstavby Laouta na FlexBox. Dalším úkolem, který jsem měl rád, je v 5. uspořádání, konkrétně se jedná o přizpůsobení obsahu.
Vidíme, jak jsou na desktopové rozlišení posty postaveny do mřížky tří kusů v řadě. Když se šířka výhledu stane méně než 800px, mřížka se změní na sloupec s příspěvky, kde je fotografie příspěvku postavena na levé a pravé straně obsahu obsahu, střídavě. A s šířkou menší než 600px, fotografie post skrývá vůbec.
.Grid (displej: -webkit-flex; displej: flex; flex-zábal: zábal; ospravedlnit-obsah: mezera mezi;) .grid-itm (okraj-dno: 30px; flex-báza: calc (33,33% - 30px) * 2/3); Displej: -webkit-Flex; Displej: Flex; Flex-Wrap: Wrap;) .Grid-IMG (okraj: 0 Auto 20px; FLEX: 0 1 80%;) .Grid-Cont (flex: 0 1 100%;) .Grid-title (text-zarovnání: centrum;) @Media obrazovka a (max-šířka: 800px) (.grid-itm (flex-itm (flex-wrap: Nowrap; flex-základ: 100%;). Grid-IMG (flex: 0 0 Auto;) .Grid-itm: ntt-dítě (sudý) .grid-img (marže: 0 0 0 30px; Objednávka: 2;) .grid-itm: ntt-dítě (liché) .Grid-IMG (okraj: 0 30px 0 0;) .Grid-Control (FLEX: 1 1 AUTO;) .Grid-titul (text-zarovnání: vlevo;)) @Media obrazovka a (max-šířka: 600px) (max. šířka: 600px) (max. šířka: 600px) (max. šířka: 600px). .Grid-img (displej: žádný;))
Ve skutečnosti to je jen malá část toho, co lze implementovat na FlexBox. Specifikace umožňuje vytvářet velmi složité rozvržení stránky při aplikaci jednoduchého kódu.
Nemovitost objednávky spravuje pořadí, ve kterém se podřízené prvky objevují uvnitř kontejneru FLEX. Ve výchozím nastavení jsou umístěny v pořadí, jak bylo zpočátku přidáno do kontejneru FLEX.
Hodnoty
.Flex-položka (Objednávka:<целое число>; }prvky FLEX lze přepsat pomocí tohoto jednoduchého vlastnosti bez změny HTML kódu.
Výchozí hodnota: 0.
flex-růst.
Tato vlastnost nastavuje koeficient růstu, který určuje, jak daleko se flex element zvýší vzhledem ke zbývajícím Flex prvků v kontejneru FLEX, při distribuci pozitivního volného místa.
Hodnoty
.flex-položka (flex-růst:<число>; }Pokud mají všechny flex-prvky stejnou hodnotu Flex-Grow, všechny prvky budou mít stejnou velikost v kontejneru.
Druhý element Flex má více prostoru vzhledem k velikosti jiných flexních prvků.
Výchozí hodnota: 0.
flex-Shrink.
flex-Shrink nastavuje kompresní koeficient, který určuje, jak daleko bude elegantní element lisován vzhledem ke zbývajícím ohybovým prvkům v kontejneru FLEX, během distribuce negativního volného místa.
Hodnoty
.flex-položka (Flex-Shrink:<число>; }Ve výchozím nastavení mohou být všechny elementy Flex stlačeny, ale pokud nastavíme hodnotu Flex-Shrinkovu nulu (bez komprese), pak prvky uchovávají původní velikost.
Výchozí hodnota: 1.
Negativní čísla jsou nepřijatelná.
flex-základ.
Tato vlastnost má stejné významy jako vlastnosti šířky a výšky a definuje počáteční hlavní velikost elementu Flex, předtím, než je volný prostor distribuován v souladu s koeficienty.
Hodnoty
.flex-položka (FLEX-BASE: AUTO |<ширина>; }flex-báze je specifikován pro čtvrtý Flex Element a diktuje jeho počáteční velikost.
Výchozí hodnota: Auto.
ohebný
Tato vlastnost je snížením vlastností flex-růst, Flex-Shrink a Flex-base. Oříznutí dalších hodnot lze také nainstalovat auto (1 1 Auto) a Žádný (0 0 Auto).
Hodnoty
.flex-položka (flex: žádný | Auto | [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
.Flex-položka (ALIGN-SELF: AUTO | AUTO | FLEX-START | CENTRESS CENTER | Baseline | Stretch;)Pro třetí a čtvrté prvky ohybu je zarovnání přepsáno prostřednictvím vlastnictví zarovnání.