Dovolte mi říct nejdříve: flexbox je snadný. Ať už je to kvůli problémům s předčasným přijetím, nebo proto, že jsme se naučili myslet z hlediska plavidel a bloků, často jsem slyšel od webových designérů, že si myslí, že je Flexbox komplexní. Ale opakuji: flexbox je snadný.
Je tu jeden trik k pochopení flexboxu, který vás naučí, po kterém bude vše jasné. Ale nejprve bych chtěl mluvit o tom, co je flexbox.
Flexbox (nebo Flexibilní modul rozložení krabice , aby se dal jeho správné jméno) je sada vlastností CSS, které kombinují k uspokojování obsahu.
Flexbox je první technika rozvržení CSS, která funguje pro moderní web. Je spravedlivé říci, že dokud nebyla podporována flexbox, nebyla tam žádná technika rozvržení, která by fungovala dobře s citlivým webovým designem.
Spousta hacků se pohybuje kolem sebe, jako nastavení prvků pro zobrazení: inline-block a dovoluje jim zabalit. To ale přineslo řadu problémů pro flexibilní stránky, v neposlední řadě nedostatek kontroly a nárazový efekt změn velikosti prvků. Z tohoto důvodu mnoho citlivých webových stránek stále používá JavaScript k umístění obsahu.
Flexbox popisuje W3C jako určený k položení prvků uživatelského rozhraní - věcí, jako jsou položky nabídky - není určen k vykreslení celých stránek.
Důvod, proč není určen pro rozložení celých stránek, spočívá v tom, že flexbox má společný modul CSS Modul rozvržení mřížky který je určen pro rozvržení. Rozvržení mřížky je považováno za nejvhodnější techniku pro rozvržení celé stránky. Bohužel v současné době existuje velmi omezená podpora pro rozvodnou síť a "omezeným" myslím "žádný". Dokonce i nejnovější verze prohlížeče Chrome jej nepodporuje bez příznaků.
Šťastná podpora prohlížeče pro flexbox je mnohem komplexnější. A protože řeší tolik moderních problémů s uspořádáním, flexbox je ideálním nástrojem, dokud není konečně přijata mřížka.
Flexbox je ideální pro stylování komponent na stránce. Skutečná síla flexboxu a důvod, proč to funguje mnohem lépe než jiné možnosti rozložení, pochází z deklarování stylů na skupiny položek namísto jednotlivých položek.
Pokud jde o uspořádání, zřídka potřebujeme umístit jednu položku - pokud plánujeme tak učinit, je mnohem lepší použít polohování. Flexbox funguje nejlépe, když řídí, jak se skupiny prvků týkají.
Vždy navrhněte věc tím, že ji zvažte ve svém dalším větším kontextu - křeslo v místnosti, pokoj v domě, dům v prostředí, prostředí v plánu města. - Eliel Saarinen
Jako takový je specifikace flexboxu rozdělena do dvou částí, jedné sady vlastností, které se vztahují k prvku kontejneru a jedné sady vlastností, které odkazují na prvky v rámci.
Podpora prohlížeče je obvykle složitá otázka. Pro flexbox je o to složitější, protože flexbox má několik různých syntaxů. Včasná nerozhodnost, nezávislý vývoj od některých dodavatelů prohlížečů a iterativní proces nám zanechal několik různých verzí flexboxu, které je třeba věnovat všem.
Naštěstí s přidáním některých prefixů prohlížečů pro starší prohlížeče se nyní můžeme spolehnout. Podle caniuse.com , současných běžných prohlížečů IE9 představí pro nás problém.
Naštěstí stejně jako všechny CSS, pokud selže flexbox, selže tiše. To znamená, že IE9 to prostě ignoruje.
Díky ohromujícímu nedostatku spolupráce mezi různými pobočkami výborů a korporací byla implementace flexboxu téměř vyrovnaná s chaosem počátku 00. let, kdy každý prohlížeč implementoval jednotlivé vlastnosti jednoznačně a nesprávně současně. Všichni, kteří mají prospěch z pochybností, byly tři implementace flexboxu prostě iteračním přístupem, který vyústil v nejvíce užitečné společné řešení.
Existují tři verze syntaxe flexbox, které si musíte být vědomi: staré, mezery a nové. Různé prohlížeče podporují různé syntaxe, například IE10 podporuje syntaxi inbetween.
Stejně jako předpony prohlížeče píšeme syntaxi Flexboxu od nejstarší k nejnovější, takže nejnovější podporovaná syntaxe přepíše starší syntaxe.
Například, psáme displej: flex jako tak:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/V zájmu srozumitelnosti se nechci ponořit do starších syntaxů nebo diskutovat o zásluhách předprocesorů, postprocesorů a různých konverzačních skriptů. Ve všech mých příkladech použiji správnou novou syntaxi.
Pokud jde o výrobní kód, používám sérii mixů Sass pro rozšíření podpory flexboxu na starší prohlížeče.
Je to vynikající Sass mixin tady , které můžete buď použít, aby se zabránilo nadýmání kódu, nebo extrahujte starší syntaxi.
Tajemství flexboxu je, že to vůbec není box. Až dosud bylo možné uspořádat rozložení na webu karteziánským systémem x a y pro vykreslení bodů. Flexbox je naopak vektor.
Zní to skvěle, ne? Flexbox je vektor, což znamená, že definujeme délku a definujeme úhel. Můžeme změnit úhel bez ovlivnění délky; a můžeme měnit délku bez ovlivnění úhlu.
Tento nový přístup znamená, že některé terminologie flexboxu jsou zpočátku složité. Například když zarovnáme položky s horní částí kontejneru flex, používáme flex-start, nikoliv horní - protože změníme orientaci, flex-start bude stále platit, ale vrchol nebude.
Jakmile pochopíte tento přístup, většina flexboxu je demystifikována.
Syntaxe Flexboxu je rozdělena do dvou skupin: těch vlastností, které řídí kontejner, a těch vlastností, které řídí přímé potomky kontejneru. První je nejužitečnější, a tak začít tam.
Řekněme, že chceme umístit položky v bloku. Chceme, aby byly rozloženy rovnoměrně. Použití flexboxu je opravdu snadné. První věc, kterou potřebujeme, je nějaká značka, která to vyzkouší:
Flexbox Layout To je jednoduchá HTML stránka , s domem div, který obsahuje pět pokoj divs, z nichž každá má třídu identifikující jejich funkci, kuchyň, toaleta, salonek a ložnice.
Co budeme dělat, je nastavit dům jako kontejner s flexboxem. Jakékoli vlastnosti flexboxu, které nastavíme na dům, budou následně aplikovány na jeho děti (v místnosti s).
Aby bylo možné uspořádat pokoj, musíme nejdříve prohlásit dům za kontejner s flexboxem a pak mu říci, jak chceme uspořádat podřízené prvky.
Prohlášení domu za kontejner flexbox používáme následující kód:
.house {background:#FF5651;display:flex;}A to je vše. Vytvořili jsme flexibilní schránku. Vše, co musíme udělat, je říct flexbox, jak uspořádat místnosti . Můžeme to udělat pomocí vlastností justify-content .
ospravedlnit obsah má pět možných hodnot: střed, flex-start, flex-end, prostor kolem sebe a prostor mezi nimi. Tyto položky vycentrovají, zarovnáte je na začátek (což je buď horní nebo levý, jak budeme diskutovat níže), konec (který je buď spodní nebo pravý), mezery je rovnoměrně kolem každé položky nebo s stejný prostor mezi jednotlivými položkami.
Použijeme prostor v okolí:
.house {background:#FF5651;display:flex;justify-content: space-around;}Zde je demo . Všimněte si, jak je dvojnásobek mezi položkami, jak je na obou vnějších hranách? Je to proto, že každá položka má stejný prostor vlevo a vpravo. Kdybychom použili prostor - místo toho by na hranách nebylo místo.
Nejsem si tím jistý, ale toaleta v mém domě je o něco menší než salonek, a přestože mám malou kuchyň, rád bych mnohem větší. Udělejme tedy nějaké dodatky k našemu kódu, aby to odráželo:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Jak můžete vidět tento příklad , naše pokoje jsou stále rovnoměrně rozmístěné. Přestože jsme změnili velikost. Flexbox je skvělý při organizování obsahu.
Jak jsme diskutovali výše, jedním z důvodů, proč flexbox funguje tak dobře pro návrháře je, že je popsán jako vektor. V současnosti flexbox podporuje pouze čtyři úhly: 0, 90, 180 a 270 stupňů. Takže je mnohem jednodušší myslet na ně jako na osu.
Chcete-li změnit osu, používáme vlastnost směru flexe , která má čtyři možné hodnoty: řádek (výchozí - jak vidíte v příkladech výše, naše místnosti jsou rozloženy zleva doprava, řádek-vzad, sloupec a sloupec-vzad.
Pokud změníme směru flexu na sloupec, uvidíte v tomto demo že pokoje jsou nyní rozloženy svisle, shora dolů:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Jak jsem si jist, že můžete hádat, řádek-vzad a sloup-vzad zvrátit pořadí položek ve vašem flex nádobě.
V posledním příkladu si všimnete, že zatímco dům se táhne po celé výřezové ploše, roztahuje se do plné výšky, a to iv případě, že je nastaven na sloupku směru flexi.
Aby bylo možné pečlivě hrát s kartézským souřadným systémem CSS, kontejner flexbox je považován za prvek blokové úrovně.
Stejně jako displej: blok má společný displej: inline-block, takže se zobrazí: flex má displej: inline-flex.
inline-flex je v současné době nejužitečnější, pokud propadáte prvky flexboxu do stávajícího rozvržení a potřebujete, aby hrál hezky s plováky a umístěnými prvky.
Jak jsme viděli, nevztahuje se na flexbox, zda se jedná o vodorovně nebo vertikálně, bez ohledu na to, jaký směr zvolíte, je považován za primární osu flexboxu.
Ovšem flexbox nám umožňuje řídit polohu podél opačné, vedlejší osy.
Poloha na sekundární ose je řízena vlastností zarovnání ; má pět možných hodnot: výchozí, středový, flex-end, flex-start a protažení.
výchozí hodnota bude obvykle nejužitečnější možností. Zajišťuje, že základní čáry textu budou line up. Chcete-li toto otestovat, musíme provést některé úpravy našeho souboru HTML:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomUvidíte, že jsem přidal nějaký text, importoval a poté použil písmo Google. Také jsem změnil velikost písma v kuchyni a umyvadle, takže je jasný rozdíl.
Když nastavíme vlastnost zarovnání položek na výchozí , uvidíte v tomto demo že základní text odpovídá.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}zarovnání - středové středy se vyrovnají svisle (v případě směru flexu: řada nebo směru flexu: řádek-vzad ) nebo vodorovně (pokud je směrem ve směru flexu: sloupec nebo směr flex: sloup-vzad ). Zde je demo.
align-items: flex-start zarovná na horní a zarovnávatele: flex-end zarovná dole (pokud je směr flex: směr nebo flex-směr: row-reverse ), nebo doleva a doprava flex-směr: sloup, nebo flex-směr: sloupec-reverzní ). Zde je demo.
roztažení, je dalším velmi užitečným řešením. roztažení změní velikost položek, takže každá z nich bude mít stejnou výšku (budou růst, nikoli zmenšovat). Zde je demo.
V ostatních příkladech jsme výslovně nastavili výšku položek, což stačí k tomu, aby se předešlo flexboxu, takže abyste viděli zarovnání položek: úsek roztahování správně, budete muset odstranit výšku ze všech tříd kromě jednoho.
Doposud jsme použili prvky flexbox k rozložení tak, aby změnili velikost v celém prostoru, ale co se stane, když je obsah položek příliš velký, aby se vešel na jeden řádek?
Chcete-li to provést, zvětším velikost svých pokojů:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomTady je jak to vypadá teď.
Pokud zmenšíte okno prohlížeče, uvidíte, že se obsah odřízne, protože na něm není prostor. Šťastně flexbox definuje vlastnost flex-wrap právě pro tuto možnost, která má tři možné hodnoty: no-wrap (výchozí), wrap a wrap-reverse.
zábal způsobí, že jakékoli položky, které by mohly přesahovat rámec kontejneru, se zabalí do dalšího řádku, stejně jako řada textových obalů.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Pokud spustíte svůj prohlížeč, uvidíte v tomto demo položky nyní zabalte do nových řádků. Všimněte si, jak je stále použita vlastnost align-items: baseline ? Reálná síla Flexboxu spočívá v kombinaci vlastností.
Jednou důležitou koncepcí, kterou budu pokrývat později, je to, že flex-wrap: wrap-reverse nezruší pořadí položek, způsobí, že jakékoli předměty, které by přesahovaly kontejner, aby se zabalily na předcházející čáru, jak je vidět v tomto demo .
Stejně jako mnoho vlastností CSS, některé vlastnosti flexboxu mají zkrácené verze, které jsou konzistentněji implementovány výrobci prohlížečů.
Vlastnost flex-flow je zkratkou pro vlastnosti flex-direction a flex-wrap . Takže místo psaní:
flex-direction:row-reverse;flex-wrap:wrap;Můžeme použít zkratku:
flex-flow:row-reverse wrap;V předchozím případě jsme použili vlastnost zarovnání položek pro zarovnání položek na výchozí, polohové a roztažitelné položky. Jak vidíte v posledním příkladě, stále se vyskytuje, ale dochází na řádku podle řádku.
Když byly naše předměty zabaleny, máme možnost nastavit způsob, jakým budou položeny na sekundární ose, pokud je kontejner větší než je požadováno.
Pokud nastavíme minimální výšku našeho domu na 1200 pixelů, naše rozložení vypadá takto .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Nyní můžeme použít vlastnost zarovnání obsahu pro uspořádání položek přes celou sekundární osu.
Vlastnost zarovnání obsahu má šest nastavení: střed, flex-end, flex-start, prostor-kolem, prostor mezi a úsek. Tyto hodnoty poskytují stejné výsledky jako jinde: centrování, zarovnání na jeden konec, vyrovnání rovnoměrně nebo roztahování.
Zde je demo s vlastností nastavenou na prostor.
Až dosud byly všechny vlastnosti, na které jsme se podívali, nastaveny na prvku kontejneru. Aby bylo možné jemně doladit položky, flexbox nám také poskytuje řadu vlastností, které lze nastavit na jednotlivé položky.
Chcete-li to objasnit, odstraňte některý z našich kódů:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomTady je jak to vypadá.
Prvním prvkem položky flexbox je zaměnitelně pojmenovaná vlastnost flex . flex je hodnota vlastnosti zobrazení na kontejneru, ale je to vlastnost sama o sobě.
Vlastnost flex je zkratka pro vlastnosti flex-grow, flex-shrink a flex- base. Úlohou těchto vlastností je roztažení nebo rozdrcení velikosti obsahu tak, aby zcela vyplnil prostor.
Vlastnost flexibilního růstu sděluje položky, které mohou v případě potřeby zvětšit, takže položky vyplňují šířku (pro flex-směr: řádek ) a výšky (pro flex-směr: sloupec ) úplně.
Vlastnost flexibilního růstu má poměr. Takže pokud nastavíme vlastnost flexibilního růstu na 1, všechny naše položky budou mít stejnou velikost jako můžete zde vidět .
.room {background:#00AAF2;height:90px;flex-grow:1;}Kromě toho, abychom měli stejnou velikost, můžeme také nastavit různé poměry. Pořád chci, aby byla moje kuchyně větší než moje toaleta, takže to opravíme v tomto demo .
.kitchen {height:300px;flex-grow:2;}flex-shrink funguje přesně stejně jako flex-růst s tím rozdílem, že se zmenší položka, je-li třeba, namísto jejího rozšíření.
Pokud změníte velikost prohlížeče, uvidíte, že v různých velikostech, kuchyně není přesně dvojnásobek šířky jiné místnosti . To je způsobeno vlastností založenou na flexe .
flex-base určuje, jak se vypočítávají vlastnosti flex-grow a flex-shrink . Má 2 hodnoty: auto (výchozí) a 0.
Je-li nastaveno na hodnotu 0, zohlední se celá položka. Je-li nastaveno na automatické , je to polstrování kolem obsahu položky, který je změněn. Jinými slovy 0 ignoruje velikost obsahu položky při výpočtu a auto jej bere v úvahu. Je tu užitečný diagram jak to vysvětluje W3C.
Zde je demo co se stane, když nastavím flex-base: 0 na výše uvedeném příkladu.
flex-base: 0 je obzvláště užitečné, pokud chcete prostorové položky rovnoměrně, bez ohledu na jejich obsah.
Jak je uvedeno výše, vlastnost flex je zkratkou pro tyto vlastnosti a zjistíte, že je to nejspolehlivější způsob nastavení těchto hodnot.
Pořadí hodnot je flex-růst, flex-shrink, flex-base. Chcete-li nastavit hodnotu růstu 2, hodnotu smrštění 1 a základ pro hodnotu 0, použijete:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Jedním z nejlepších vlastností flexboxu je jeho schopnost měnit pořadí položek bez ovlivnění značky; to je obzvláště užitečné pro přístupnost, protože nám umožňuje správně označit kódování a poté jej optimálně zobrazit.
K tomu použijeme vlastnost objednávky položky.
Při pohledu na náš příklad je toaleta přímo u kuchyně. Rád bych, aby to bylo vedle ložnic, a tak mohu jít rovnou do rána, a tak to posuneme. V současné době je to druhá položka, chceme, aby byla třetí. Takže nastavíme jeho vlastnost objednávky v tomto demo .
.washroom {height:60px;order:2;}Vidíš, jak to celé vyrazilo až do konce řádku? Je to vedle ložnic, ale ne jak jsme zamýšleli. Jedná se o důležitý gotcha v flexboxu, protože mnoho vývojářů (včetně mě) původně očekávalo , že příkaz funguje jako pole.
objednávka skutečně funguje jako z-index CSS , což znamená, že pokud výslovně nezadáte objednávku položky, předpokládá se, že je v objednávce nižší než položka, pro kterou byla hodnota explicitně nastavena.
Chceme, aby toaleta vyměnila salonek, takže v tomto demo jediné další položky, které potřebují objednávku, jsou ložnice s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Všimněte si, jak mají obě ložnice stejné sdílené číslo objednávky? V takových případech se prohlížeč vrátí zpět na objednávku DOM.
Konečná položka je vlastnost align-self. Používá se ke změně zarovnání položky na sekundární ose. align-items se používá pro zarovnání všech položek a tato vlastnost vám dává možnost zrušení tohoto nastavení.
Ve vstupním kontejneru přebírá stejná pět hodnot jako ekvivalentní vlastnost: výchozí, středový, flex-end, flex-start a protažení.
Zde je demo z hygienického zařízení.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox je mocná volba pro vytyčování obsahu. Ačkoli to není určeno k vykreslení celých stránek, jeho vynikající podpora Grid Layout je skvělou volbou, zejména pro mobilní první stránky.
Prokázat, že budeme sestavovat jednoduchou stránku, která používá některé z výše popsaných technik.
První krok je naše značení a některé základní styly pro stránku.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Tak jako můžeš vidět , Mám div s ID stránkou. Vnitřní stránka mám neřízený seznam novinek. Po zprávách mám hlavičku, která je pod novým obsahem ve prospěch dostupnosti. Nakonec mám zápatí.
První věc, kterou chci udělat, je přesunout záhlaví nahoru na začátek stránky. Chcete-li to provést, nastavíme stránku jako kontejner s flexboxem. Potom nastavíme směr do sloupce. Potom přiřaďte objednávku každému podřízenému prvku stránky.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Dalším krokem je rozložení záhlaví. Dětské elementy uvnitř flexboxových kontejnerů mohou být kontejnery s flexboxem samy o sobě, takže můžeme použít flexbox pro rovnoměrné uspořádání záhlaví .
Zadejme hlavičku jako kontejner s flexboxem, pak prostě usaďte obsah, bez bočních polštářků a nakonec se ujistěte, že položky nabídky jsou na stejné základně jako logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Naše zpravodajské příspěvky se budou týkat nejčastějších příběhů, takže musí být podstatné velikosti, aby se udělal prostor pro text, obrázek nebo video. Takže je musíme zabalit.
Nastavíme novinky div jako kontejner s flexboxem. Dále uveďte minimální rozměry a barvu, abychom je mohli vidět jasně.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nyní musíme nastavit kontejner zpráv, který se má zabalit, a novinky, které se mají rozbalit, aby vyplnili dostupný prostor.
#news {order:2;display:flex;flex-flow:row wrap;}Výzvou, kterou máme nyní, je to, že když newsItem nejsou rovnoměrně rozděleny, největší položka (G) je v dolní části. Na většině webů chceme dát největšímu prostoru nejvyššímu obsahu. Tuto situaci můžeme vyřešit nastavením zábalu na zábal.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Tím se položky objednávají znovu, ale čte se vlevo nahoře, jsou nyní nefunkční. Takže musíme zrušit objednávku, nastavením směru na řádek-vzad.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}To položí položky v pořadí v pořadí, čtení zleva doprava, shora dolů; s většími položkami vždy v horní části. Nechci však muset měnit pořadí příběhů v mém značení, abych přinutil položku A, aby přišla před bod B. Takže poslední věc, kterou musím udělat, je změnit pořadí položek.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Posledním prvkem, který má být navržen, je zápatí. Chceme to rozložit, stejně jako záhlaví, ale proto, že zápatí má pouze tři podřízené prvky (ve srovnání s čtyřmi záhlavími ), nastavíme odstavec tak, aby byl dvakrát tak široký jako logo, a seznam .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}To funguje skvěle v rozměrech stolních počítačů, ale zmenší váš prohlížeč dolů a uvidíte, že je příliš malá na malých zařízeních. Kód změňte tak, aby byl rozložen jako sloupce pod 600 pixelů a vrátí se do řádku nad 600 pixelů.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}A tady to máte. Moderní přístup k vytváření obsahu na webové stránce, který je široce podporován a snadno implementovatelný.
Síla flexboxu spočívá v tom, že jeho vlastnosti mohou být kombinovány, aby nám umožnily přesnou kontrolu nad našimi rozvrženími s nejjednodušší možnou syntaxí.