Flex bloky po celé šířce. Vše o flexboxu: příklady použití, vlastnosti a výhody. Přidání více vnořených sloupců
Ten, kdo provozuje webové stránky, se dříve nebo později musí dostat do situace, kdy musí změnit společnost poskytující hostingové služby. Popíšu situaci, která umožní mnoha začátečníkům a nejen administrátorům přejít na jiný hosting prakticky bez ztráty jak výkonu webu, tak ztráty dat.
Možná, že akce, které jsem popsal, budou někomu připadat jako znovuobjevení kola, ale opakovaně jsem byl svědkem toho, jak se jednoduchý přesun o den nebo více zdržel a stránka nefungovala. Již jsem se několikrát stěhoval a stránky zůstaly přístupné, přesun proběhl téměř bez povšimnutí. Hned řeknu, že jsem ke stěhování nevyužíval služeb hostingových společností, vždy jsem vše dělal sám. Také tento pokyn nemusí být použitelné při přesunu vysoce vytížených a distribuovaných zdrojů, ale není na mně, abych správcům takových zdrojů říkal, jak takový přesun organizovat.
1 kámen. Mail.
Pokud stále používáte poštovní služba od hostitele - zbavte se této závislosti co nejrychleji. Použít pro doménu služby třetí strany, například bezplatné služby z Yandex.Mail pro doménu nebo Google Apps. Nebo, pokud je pro vás nezávislý management kritický, zvedněte si vlastní poštovní server. Přechod na službu třetí strany pomůže vyhnout se ztrátě dat při stěhování a určitě zlepší kvalitu poštovních služeb (pro hostitele není poskytování poštovních služeb prioritou, takže kvalita často ponechává mnoho přání)2 kámen. Výběr nového hostitele
V současné době má většina hostitelů zkušební období kdy můžete objednávat na určitou dobu (od 7 do 30 dnů) bezplatný plán pro testování. Nebuďte líní a objednejte si takový testovací tarif u hostitele, který vás zaujal svými cenami, a přidejte si tam některou z domén třetí úrovně, nebo použijte přijatou IP adresu (můžete si ji prohlédnout v ovládacím panelu). Pingujte na tuto IP a porovnejte indikátory s aktuálními indikátory, zkuste tam nainstalovat něco testovacího, třeba fórum na phpbb3 nebo engine pro web Joomla nebo Drupal. Proč oni - tyto motory jsou poměrně náročné na zdroje, a pokud se vyskytnou problémy i s minimální instalací, pak hostitel není pro vás. Podívejte se na verze softwaru, které hostitel používá, je velmi žádoucí, aby verze nebyly nižší než verze vašeho aktuálního hostitele.
Dalším důležitým parametrem, který se vám bude hodit pro přesun, je možnost vzdáleného přístupu k SQL serveru, pokud pro web používáte SQL databázi. V dnešní době většina dobrých hostitelů takovou službu poskytuje. Pokud tuto službu v ovládacím panelu nenajdete, požádejte technickou podporu. A nespěchejte s konečným výběrem – měli byste k výběru přistupovat vědomě, neměli byste brát první možnost, na kterou narazíte, určitě zvažte několik dalších. Na základě osobní zkušenosti bych recenze o vybraném hostiteli nečetl – často takové recenze neobsahují konkrétní a pro vás důležité informace a tyto detaily se vynoří v tu nejméně vhodnou chvíli (například omezení počtu emailů na hodina může být kritická pro stránky , kde se používají e-mailová upozornění na novinky nebo osobní zprávy na fóru).
Pokud chcete, můžete dokonce připojit nějakou službu, abyste ověřili dostupnost zdroje a viděli její výsledky během několika dní. Pokud jste se vším spokojeni, klidně si objednejte tarif, který potřebujete.3 kámen. SQL databáze a testování výkonu webu na novém místě
Tento krok byste měli provést, pokud k ukládání dat používáte databázi SQL. Je třeba zmínit, že existují CMS, které ke své práci nevyužívají SQL databáze a vše ukládají jako soubory – pokud tuto možnost využijete, měli byste tento krok přeskočit a váš úkol se zjednoduší.
Chcete-li začít, povolte pro nového hostitele vzdálený přístup k serveru SQL, nastavte účty pro přístup k němu (pro přístup obvykle stačí zadat IP adresu zdroje, ze kterého bude přístup umožněn; měli byste uvést IP adresu, kde hlavní stránka je aktuálně umístěna Připojte se a nakonfigurujte na novém hostingu vaší domény (prozatím se pouze připojte, ale neuvádějte žádné změny aktuální nastavení vaši doménu od registrátora nebo aktuálního hostitele).
Nyní musíte udělat zálohování dat z databáze SQL používané pro daný web. Pokud je databáze malá, prostředky poskytnuté hostitelem jsou obvykle dostatečné. K tomu používám jednoduchý a rychlý skript Sypex Dumper (doporučuji nejprve vyzkoušet starou verzi 1 a poté verzi 2). Přeneste tento výpis na nový hosting a obnovit ji. Paralelně můžete přenášet ftp soubory váš web na nový hosting.
Pro testování využívám možnosti souboru hosts, kde můžete zadat doménu, kterou potřebujete, a IP, kterou potřebujete. Tito. na svém počítači zadejte svou doménu a IP adresu nového hostingu do souboru hosts a prostřednictvím vašeho prohlížeče se stránka začne otevírat z nového umístění. To je nutné pro kontrolu funkčnosti webu na novém místě (občas se vyskytují problémy s kódováním). Nezapomeňte opravit konfigurační soubor site engine, kde zadáváte nová data pro práci s SQL databází. Pokud vše funguje, pokračujte. Odstraňte zmínku o vaší doméně z hostitelů, aby prozatím nepřekážela.4 kámen. Transparentní pohyb.
Přečtěte si nápovědu hostitele, abyste zjistili, jaké parametry musíte zadat pro vzdálený přístup k databázi SQL. Vytvořte si aktuální verzi SQL databáze a rychle ji obnovte na nový hosting. Bez plýtvání časem opravte konfigurační soubor svého webu a zadejte jej, aby byla data načtena ze vzdálené databáze. Na v této fázi Web může zaznamenat zpomalení, ale to je dočasné. Ke ztrátě dat může také dojít, pokud máte vysoce navštěvovaný zdroj a data se objevují každou sekundu. Proto je pro tuto akci vhodné zvolit nejméně vytížený čas webu a případně krátce zapnout režim údržby webu, aby uživatelé neměli čas psát něco, co se při přechodu na jinou databázi ztratí. Po přepnutí zkontrolujte funkčnost stránek a pokračujte dále.
Nyní přepněte správu domén na jiný hosting, změňte u registrátora DNS server nebo IP adresy pro subdomény a počkejte, až se vše rozšíří do světa - většinou se tak stane do 3-4 hodin, ne více. Jakmile se váš web začne otevírat z nového umístění, použijte svůj soubor hostitelů, zadejte tam starou IP adresu domény a zkopírujte soubory webu ze starého umístění. Poté odstraňte zmínku o vaší doméně v hostitelích a synchronizujte zkopírované soubory se soubory na novém hostingu. To bude potřeba pro zdroje, ke kterým mohly být během této doby připojeny některé přílohy, soubory nebo uživatelské avatary. Jen neměňte konfigurační soubor, jinak web přestane fungovat, dokud to znovu neopravíte
Proč Flexbox?
Po dlouhou dobu byly jedinými spolehlivými nástroji kompatibilními s různými prohlížeči, které byly k dispozici pro vytváření rozvržení CSS, věci jako floats a positioning . Ty jsou fajn a fungují, ale v některých ohledech jsou také dost omezující a frustrující.
Následující jednoduché požadavky na rozvržení je s takovými nástroji buď obtížné nebo nemožné dosáhnout jakýmkoli pohodlným a flexibilním způsobem:
- Vertikální centrování bloku obsahu uvnitř jeho rodiče.
- Aby všechny potomky kontejneru zabíraly stejné množství dostupné šířky/výšky, bez ohledu na to, jak velká šířka/výška je k dispozici.
- Aby všechny sloupce v rozvržení s více sloupci přijaly stejnou výšku, i když obsahují různé množství obsahu.
Jak uvidíte v následujících částech, flexbox usnadňuje mnoho úkolů s rozvržením. Pojďme se do toho pustit!
Představujeme jednoduchý příklad
V tomto článku vás provedeme řadou cvičení, která vám pomohou pochopit, jak flexbox funguje. Chcete-li začít, měli byste vytvořit místní kopii prvního startovacího souboru – flexbox0.html z našeho úložiště github – načíst ji do moderního prohlížeče (jako je Firefox nebo Chrome) a podívat se na kód ve vašem editoru kódu. Můžete také.
Směr ohybu: sloupec;
Uvidíte, že to vrátí položky zpět do rozvržení sloupců, podobně jako před přidáním jakéhokoli CSS. Než budete pokračovat, odstraňte tuto deklaraci ze svého příkladu.
Poznámka: Ohebné položky můžete také rozmístit v opačném směru pomocí hodnot řádek-obrácený a sloupec-obrácený. Experimentujte s těmito hodnotami také!
Obal
Jeden problém, který vyvstává, když máte ve svém rozvržení pevné množství šířky nebo výšky, je to, že nakonec vaše děti flexboxu přetečou svůj kontejner a naruší rozvržení. Podívejte se na náš příklad flexbox-wrap0.html a zkuste jej zobrazit živě (pokud chcete postupovat podle tohoto příkladu, vezměte si nyní místní kopii tohoto souboru):
Zde vidíme, že děti skutečně vylamují ze svého kontejneru. Jedním ze způsobů, jak to můžete opravit, je přidat následující deklarace k vašemu prvku představuje samostatnou sekci – která nemá konkrétnější sémantický prvek, který by ji reprezentoval obsažený v dokumentu html.>
Flex-wrap: wrap;
flex: 200px;
Zkuste to nyní; uvidíte, že rozvržení vypadá mnohem lépe, když obsahuje:
Nyní máme více řad – na každou řadu je namontováno tolik dětí flexbox, kolik dává smysl, a jakýkoli přetečení se přesune dolů na další řádek. Deklarace flex: 200px nastavená na články znamená, že každý bude mít šířku alespoň 200px; Tuto vlastnost si probereme podrobněji později. Můžete si také všimnout, že několik posledních dětí na posledním řádku je rozšířeno, takže celý řádek je stále vyplněn.
Ale je toho víc, co můžeme udělat. Nejprve zkuste změnit hodnotu vlastnosti flex-direction na řádek-obrácený – nyní uvidíte, že stále máte rozložení s více řádky, ale začíná od opačného rohu okna prohlížeče a proudí obráceně.
flex-flow zkratka
Na tomto místě stojí za zmínku, že existuje zkratka pro flex-direction a flex-wrap - flex-flow. Můžete tedy například vyměnit
Flex-směr: řádek; flex-wrap: zavinovačka;
Flex-flow: obtékání řádků;
Flexibilní dimenzování flexibilních položek
Vraťme se nyní k našemu prvnímu příkladu a podívejme se, jak můžeme řídit, jaký podíl prostoru zabírají položky flex. žít).
Nejprve do spodní části CSS přidejte následující pravidlo:
HTML
Článek:n-tého typu(3) (flex: 2; )
Sekce - článek článek článek - div - tlačítko div tlačítko div tlačítko tlačítko tlačítko
Podívejme se na kód, který jsme použili pro rozložení.
Shrnutí
Tím naše prohlídka základů flexboxu končí. Doufáme, že jste se bavili a dobře si s tím pohrajete, když budete pokračovat v učení. Dále se podíváme na další důležitý aspekt rozvržení CSS – mřížky CSS.
Ahoj habr!
Jednoho krásného večera, aniž bych tušil cokoli zajímavého, přišel na náš chat návrh od autora publikace, kterou napsal na jaře 2012, napsat remake článek, ale s použitím FlexBoxu a doprovodného vysvětlení, co a jak funguje. Po jistých pochybnostech stále zvítězil zájem porozumět specifikaci hlouběji a já se šťastně posadil, abych tytéž příklady napsal. Když jsme se do této oblasti ponořili, začalo se vyjasňovat mnoho nuancí, které přerostly v něco víc než jen předělání dispozic. Obecně chci v tomto článku hovořit o takové úžasné specifikaci nazvané „CSS Flexible Box Layout Module“ a ukázat některé z jejích zajímavých funkcí a příkladů použití. Srdečně zvu všechny, kteří mají zájem, aby se zapojili do hacku.
Na co bych chtěl upozornit je, že pro vytvoření rozvržení na FlexBox bude vývojář potřebovat určitou míru přizpůsobení. Z vlastního příkladu jsem cítil, že mnohaletá zkušenost hrála krutý vtip. FlexBox vyžaduje trochu jiný způsob uvažování o řazení prvků v toku.
Technická část
Než přejdeme k jakýmkoli příkladům, stojí za to pochopit, jaké vlastnosti jsou zahrnuty v této specifikaci a jak fungují. Protože některé z nich nejsou zpočátku příliš jasné a některé jsou obklopeny mýty, které nemají nic společného s realitou.Tak. Ve FlexBoxu jsou dva hlavní typy prvků: Flex Container a jeho potomci - Flex Items. Chcete-li inicializovat kontejner, stačí přiřadit pomocí css k prvku displej: flex; nebo displej: inline-flex;. Rozdíl mezi flex a inline-flex je pouze v principu interakce s prvky obklopujícími kontejner, podobně jako display: block; a zobrazení: inline-block;, resp.
Uvnitř flexibilního kontejneru jsou vytvořeny dvě osy, hlavní osa a kolmá nebo příčná osa. Většinou jsou flexibilní prvky zarovnány podél hlavní osy a poté podél osy příčné. Ve výchozím nastavení je hlavní osa vodorovná a směřuje zleva doprava a příčná osa je svislá a směřuje shora dolů.
Směr os lze ovládat pomocí vlastnosti css flex-direction. Tato vlastnost nabývá několika hodnot:
řádek(výchozí): Hlavní osa flexibilního kontejneru má stejnou orientaci jako vložená osa aktuálního režimu směru řádku. Začátek (main-start) a konec (main-end) směru hlavní osy odpovídají začátku (inline-start) a konci (inline-end) inline-osy.
řádek-zpět: Vše je stejné jako v řadě, pouze main-start a main-end jsou prohozeny.
sloupec: stejné jako řada, pouze nyní hlavní osa směřuje shora dolů.
sloupec-reverzní: stejně jako řada-zpět, pouze hlavní osa směřuje zdola nahoru.
Jak to funguje, můžete vidět v příkladu na jsfiddle.
Ve výchozím nastavení jsou všechny položky Flex v kontejneru umístěny na jednom řádku, i když se do kontejneru nevejdou, přesahují jeho hranice. Toto chování se přepíná pomocí vlastnosti flex-wrap. Tato vlastnost má tři stavy:
nowrap(výchozí): Flex položky jsou seřazeny do jednoho řádku zleva doprava.
zabalit: flexibilní prvky jsou postaveny ve víceřádkovém režimu, přenos se provádí ve směru příčné osy, shora dolů.
wrap-reverse: stejné jako wrap, ale zabalí se zdola nahoru.
Podívejme se na příklad.
Pro pohodlí je zde další vlastnost flex-flow, ve kterém můžete současně specifikovat flex-direction A flex-wrap. Vypadá to takto: flex-flow:
Prvky v kontejneru lze zarovnat pomocí vlastnosti ospravedlnit-obsah podél hlavní osy. Tato vlastnost přijímá až pět různých hodnot.
flex-start(výchozí): Prvky Flex jsou zarovnány k počátku hlavní osy.
ohebný konec: prvky jsou zarovnány na konec hlavní osy
centrum: Prvky jsou zarovnány na střed hlavní osy
prostor-mezi: prvky zabírají celou dostupnou šířku v kontejneru, krajní prvky jsou pevně přitlačeny k okrajům kontejneru a volné místo rovnoměrně rozložené mezi prvky.
prostor kolem: Flexibilní prvky jsou zarovnány tak, aby volný prostor byl rovnoměrně rozložen mezi prvky. Ale stojí za zmínku, že prostor mezi okrajem nádoby a vnějšími prvky bude poloviční než prostor mezi prvky uprostřed řady.
Samozřejmě si můžete rozkliknout ukázku, jak tato vlastnost funguje.
To není vše, máme také možnost zarovnat prvky podél příčné osy. Uplatněním nemovitosti zarovnat-položky, který také nabývá pěti různých hodnot, můžete dosáhnout zajímavého chování. Tato vlastnost umožňuje zarovnat prvky v řadě vůči sobě navzájem.
flex-start: všechny prvky jsou posunuty na začátek řádku
ohebný konec: prvky jsou posunuty na konec řádku
centrum: prvky jsou zarovnány na střed řádku
základní linie: Prvky jsou zarovnány k účaří textu
úsek(výchozí): prvky jsou roztaženy tak, aby vyplnily celý řádek.
Další vlastnost podobná té předchozí je zarovnat-obsah. Je to jediný zodpovědný za zarovnání celých čar vzhledem k ohebnému kontejneru. Nebude to mít žádný účinek, pokud flexibilní položky zaberou jeden řádek. Nemovitost nabývá šesti různých hodnot.
flex-start: všechny řádky jsou přitlačeny na začátek příčné osy
ohebný konec: všechny čáry jsou přitlačeny na konec příčné osy
centrum: Všechny čáry balení jsou zarovnány na střed příčné osy
prostor-mezi: čáry jsou rozmístěny od horního okraje ke spodnímu, přičemž mezi řádky zůstává volný prostor, zatímco krajní čáry jsou přitisknuty k okrajům nádoby.
prostor kolem: Čáry jsou rozmístěny rovnoměrně po celé nádobě.
úsek(výchozí): čáry jsou roztaženy, aby zabraly veškerý dostupný prostor.
V tomto příkladu si můžete vyzkoušet, jak fungují align-items a align-content. Tyto dvě vlastnosti jsem konkrétně představil v jednom příkladu, protože spolu úzce spolupracují a každá plní svůj vlastní úkol. Všimněte si, co se stane, když jsou prvky umístěny na jeden řádek nebo na více řádků.
Vyřešili jsme parametry flexibilního kontejneru, zbývá jen zjistit vlastnosti flexibilních prvků.
První vlastností, se kterou se seznámíme, je objednávka. Tato vlastnost umožňuje změnit pozici ve streamu konkrétní prvek. Ve výchozím nastavení mají všechny položky flex pořadí: 0; a jsou postaveny v pořadí přirozeného toku. V příkladu můžete vidět, jak prvky mění místa, pokud je použijete různé významy objednávka.
Jednou z hlavních vlastností je flex-base. Pomocí této vlastnosti můžeme určit základní šířku ohebného prvku. Výchozí hodnota je auto. Tato vlastnost úzce souvisí s flex-grow A flex-shrink, o kterém budu mluvit o něco později. Přijímá hodnotu šířky v px, %, em a dalších jednotkách. V podstatě to není striktně šířka flex prvku, je to jakýsi výchozí bod. Ve vztahu ke kterému se prvek natahuje nebo smršťuje. V automatickém režimu získá prvek základní šířku vzhledem k obsahu uvnitř.
flex-grow na několika zdrojích má zcela nesprávný popis. Říká, že prý nastavuje poměr velikostí prvků v kontejneru. Ve skutečnosti to není pravda. Tato vlastnost určuje faktor zvětšení prvku, pokud existuje volné místo v kontejneru. Ve výchozím nastavení má tato vlastnost hodnotu 0. Představme si, že máme flex kontejner, který má šířku 500px, uvnitř jsou dvě flex položky, každá se základní šířkou 100px. V kontejneru tak zůstane dalších 300 pixelů volného místa. Pokud zadáme flex-grow: 2 pro první prvek a flex-grow: 1; Výsledkem je, že tyto bloky zaberou celou dostupnou šířku kontejneru, pouze šířka prvního bloku bude 300px a druhého pouze 200px. Co se stalo? Stalo se, že dostupných 300 pixelů volného místa v kontejneru bylo rozděleno mezi prvky v poměru 2:1, +200 pixelů pro první a +100 pixelů pro druhý. Takto to vlastně funguje.
Zde plynule přecházíme k další podobné vlastnosti, totiž flex-shrink. Výchozí hodnota je 1. Nastavuje také faktor pro změnu šířky prvků, pouze v zadní strana. Pokud má nádoba šířku méně než součet základní šířky prvků, pak tato vlastnost vstoupí v platnost. Kontejner má například šířku 600 pixelů a flexibilní základna prvků je 300 pixelů. Dejte prvnímu prvku flex-smrštění: 2; a druhému prvku flex-smršťování: 1;. Nyní zmenšíme kontejner o 300 pixelů. Proto je součet šířky prvků o 300 pixelů větší než kontejner. Tento rozdíl je distribuován v poměru 2:1, takže od prvního bloku odečteme 200px a od druhého 100px. Nová velikost prvky jsou 100 pixelů a 200 pixelů pro první a druhý prvek. Pokud nastavíme flex-shrink na 0, pak zabráníme smrštění prvku na velikost menší, než je jeho základní šířka.
Ve skutečnosti se jedná o velmi zjednodušený popis toho, jak to celé funguje, aby byl jasný obecný princip. Podrobněji, pokud by to někoho zajímalo, algoritmus je popsán ve specifikaci.
Všechny tři vlastnosti lze zapsat ve zkrácené podobě pomocí výrazu flex. Tohle vypadá takto:
flex:
A můžeme také napsat další dvě zkrácené verze, flex:auto; A flex: žádný;, což znamená flex: 1 1 auto; A flex: 0 0 auto; respektive.
Poslední vlastnost pružných prvků zůstává zarovnat se. Všechno je zde jednoduché, je to stejné jako zarovnání položek pro kontejner, což vám umožňuje přepsat zarovnání pro konkrétní prvek.
To je ono, už mě to nebaví! Uveďte příklady!
S technická část Přišli jsme na to, ukázalo se to docela zdlouhavé, ale je potřeba se do toho dostat. Nyní můžeme přejít k praktickému použití.Během rozvržení těchto „pěti opravdu užitečných responzivních šablon značek“ jsem se musel rozhodnout typické situace, se kterým se vývojář setkává poměrně často. S flexboxem je implementace těchto řešení jednodušší a flexibilnější.
Vezměme stejné čtvrté rozložení, protože... má nejzajímavější prvky.
Nejprve určíme hlavní šířku stránky, zarovnáme ji na střed a přitlačíme zápatí ke spodní části stránky. Jako vždy obecně.
Html ( pozadí: #ccc; min-výška: 100 %; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; zobrazení: -webkit-směr: sloupec: 30px 0 10px; : 960px-šířka: 430px; velikost rámečku: 430px;
Vzhledem k tomu, že jsme specifikovali flex-grow: 1 pro .main; natáhne se do plné dostupné výšky, čímž přitlačí zápatí dolů. Bonusem v tomto řešení je, že zápatí může mít nepevnou výšku.
Nyní umístěme logo a menu do záhlaví.
.logo ( font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( pozadí: #222; šířka: 50px; výška: 50px; okraj: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( pozadí: #222; šířka: 90px; výška : 30px; ) .nav ( margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( pozadí: #222; šířka: 130px; výška: 50px-velikost: 1.5rem text-decoration: none;
Jelikož má hlavička flex-wrap: wrap; a ospravedlnit-obsah: mezera-mezi; Logo a menu jsou rozesety na různých stranách záhlaví a pokud na menu není dostatek místa, elegantně se přesune pod logo.
Dále uvidíme skvělý příspěvek nebo banner, je těžké říci, o co konkrétně jde, ale o to nejde. Vpravo máme obrázek a vlevo text s nadpisem. Osobně se držím myšlenky, že jakékoli prvky by měly být maximálně flexibilní, bez ohledu na to, zda je rozvržení adaptivní nebo statické. Takže v tomto příspěvku máme postranní panel, ve kterém je umístěn obrázek přísně vzato, nemůžeme přesně říci, jakou šířku potřebujeme, protože dnes máme velký obrázek, zítra malý a nechceme prvek předělávat; pokaždé od nuly. To znamená, že potřebujeme, aby postranní panel zaujal místo, které potřebuje, a zbytek prostoru přejde na obsah. Udělejme toto:
Box (velikost písma: 1,25rem; výška řádku: 1,5; styl písma: kurzíva; okraj: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: střed; .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100%; height : auto)
Jak můžete vidět u .box-base, kde máme nadpis a text, specifikoval jsem šířku základny pomocí flex-base: 430px; a také zakázáno použití smršťování bloků flex-smršťování: 0;. S touto manipulací jsme řekli, že obsah nemůže být širší než 430 pixelů. A vzhledem k tomu, že pro .box uvádím flex-wrap: zavinovačka; v okamžiku, kdy se postranní panel a obsah nevejdou do kontejneru.boxu, postranní panel automaticky spadne pod obsah. A to vše bez aplikace @media! Myslím, že je to opravdu skvělé.
Zbývá nám obsah tří sloupců. Existuje několik řešení tohoto problému, ukážu jedno z nich v ostatních rozloženích je další možnost.
Vytvořme kontejner, nazvěme jej .content a nakonfigurujeme jej.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )
Kontejner má tři sloupce, .bannery, .příspěvky, .komentáře
.banners ( flex: 1 1 200px; ) .posts ( okraj: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( okraj: 0 0 30px 30px; flex: 1 1 200px; )
Sloupcům jsem dal základní šířku 200px, aby se sloupce příliš nezužovaly, ale bylo by lepší, kdyby se podle potřeby přesouvaly pod sebe.
Podle rozvržení se s obsahem neobejdeme bez @media, tak si ještě trochu upravme chování sloupců na šířku<800px и <600px.
@media screen and (max-width: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-base: 100%; ) .posts ( margin-left: 0; ) ) @media screen and (max-width: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )
To je celé kouzlo, pokud jde o vytváření rozvržení na FlexBox. Další úkol, který se mi líbil, je v 5. layoutu, konkrétně se týká přizpůsobení obsahu.
Vidíme, jak v rozlišení plochy jsou příspěvky sestaveny v mřížce po třech za sebou. Když se šířka výřezu zmenší než 800 pixelů, mřížka se změní na sloupec s příspěvky, kde je fotka příspěvku střídavě zarovnána na levé a pravé straně obsahu příspěvku. A pokud je šířka menší než 600px, fotka příspěvku se zcela skryje.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-base: calc(33,33% - 30px) * 2/3 display: -webkit-flex; display: flex-wrap: wrap ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1); 100 % (liché) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen and (max-width: 600px) ( .grid-img (zobrazení: žádné; ) )
Ve skutečnosti je to jen malá část toho, co lze implementovat pomocí FlexBox. Specifikace umožňuje vytvářet velmi složité rozvržení stránek pomocí jednoduchého kódu.
Flexbox je navržen tak, aby nás zachránil před ohavností čistého CSS (jako je vertikální zarovnání), a odvádí skvělou práci. Pochopit principy jeho fungování ale může být někdy těžké, zvláště pokud jste začátečník.
Hlavním cílem Flexboxu je učinit vrstvy flexibilní a pracovat s nimi intuitivně. K dosažení tohoto cíle umožňuje kontejnerům, aby se rozhodly, jak naloží se svými dětmi, včetně změny jejich velikosti a rozestupu.
Zní to dobře, ale uvidíme, jestli je to v praxi tak plynulé. V tomto článku prozkoumáme 5 nejoblíbenějších vlastností Flexbox, co dělají a jak vlastně fungují.
Displej: Flex
Zde je příklad stránky:
Máme 4 různé barevné divy různých velikostí, které jsou uvnitř šedé divy. Každý div má vlastnost display: block. Každý čtverec tedy zabírá celou šířku čáry.
Abychom mohli začít s Flexboxem, musíme udělat z našeho kontejneru flex kontejner. Dělá se to takto:
#container ( displej: flex; )
Zdá se, že se nic moc nezměnilo - divy se právě seřadily. Ale udělal jsi něco opravdu mocného. Dali jste svým čtvercům skvělou vlastnost zvanou „flex-context“.
Flex Direction
Ohebná nádoba má dvě osy: hlavní osu a tu, která je na ni kolmá.
Ve výchozím nastavení jsou všechny objekty umístěny podél hlavní osy: zleva doprava. To je důvod, proč se naše čtverce seřadily, když jsme použili zobrazení: flex . Směr ohybu však umožňuje otáčení hlavní osy.
#container ( display: flex; flex-direction: column; )
Je důležité si uvědomit, že flex-direction: column nezarovnává čtverce podél osy kolmé k hlavní. Samotná hlavní osa mění své umístění a nyní směřuje shora dolů.
Existuje několik dalších vlastností pro flex-direction: row-reverse a column-reverse.
Zarovnat obsah
Justify-content je zodpovědný za zarovnání prvků podél hlavní osy.
Vraťme se k flex-direction: row .
#container ( display: flex; flex-direction: row; justify-content: flex-start; )
Justify-content může nabývat 5 hodnot:
- flex-start ;
- ohebný konec;
- střed ;
- mezera mezi ;
- prostor kolem.
Mezera-mezi nastavuje stejnou vzdálenost mezi čtverci, ale ne mezi kontejnerem a čtverci. Space-around také nastavuje stejnou vzdálenost mezi čtverci, ale nyní je vzdálenost mezi kontejnerem a čtverci poloviční než vzdálenost mezi čtverci.
Zarovnat položky
Pokud justify-content funguje na hlavní ose, pak align-items funguje na ose kolmé k hlavní ose.
Vraťme se k flex-direction: row a projděte si příkazy align-items:
- flex-start ;
- ohebný konec;
- střed ;
- natáhnout se;
- základní linie.
Stojí za zmínku, že pro zarovnání položek: stretch by měla být výška čtverců nastavena na auto . Pro zarovnání položek: baseline není nutné odstraňovat značky odstavce, jinak to dopadne takto:
Abychom lépe porozuměli tomu, jak fungují osy, zkombinujme obsah zarovnání s položkami zarovnání a podívejme se, jak funguje zarovnání na střed pro dvě vlastnosti směru ohybu:
Zarovnat se
Align-self umožňuje zarovnat prvky jednotlivě.
#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Pouze tento čtverec bude vystředěn.
Pro dva čtverce použijeme align-self a pro zbytek použijeme align-items: center a flex-direction: row.
Flex-Basis
Flex-basis je zodpovědný za počáteční velikost prvků předtím, než jsou změněny jinými vlastnostmi Flexboxu: 
Flex-base ovlivňuje velikost prvků podél hlavní osy. 
Podívejme se, co se stane, když změníme směr hlavní osy:
Všimněte si, že jsme také museli změnit výšku prvků. Flex-base může definovat jak výšku prvků, tak jejich šířku v závislosti na směru osy.
Flex Grow
Tato vlastnost je trochu složitější.
Nejprve dejte našim čtvercům stejnou šířku 120 pixelů:
Ve výchozím nastavení je hodnota flex-grow 0. To znamená, že čtverce nemohou růst (zabírají zbývající místo v kontejneru).
Zkusme nastavit flex-grow na 1 pro každý čtverec:
Čtverečky zabíraly zbývající místo v kontejneru. Hodnota flex-grow přepíše hodnotu šířky.
Zde však vyvstává jedna otázka: co znamená flex-grow: 1?
Zkusme nastavit flex-grow na 999:
A... nic se nestalo. Stalo se tak proto, že flex-grow nepřijímá absolutní hodnoty, ale relativní.
To znamená, že nezáleží na hodnotě flex-grow, důležité je, jaká je ve vztahu k ostatním čtvercům:
Nejprve je flex-grow každého čtverce 1, celkem je 6. To znamená, že náš kontejner je rozdělen na 6 částí. Každý čtverec zabere 1/6 dostupného místa v kontejneru.
Když se flex-grow třetího čtverce změní na 2, nádoba se rozdělí na 7 částí (1 + 1 + 2 + 1 + 1 + 1).
Nyní třetí čtverec zabírá 2/7 prostoru, zbytek - každý 1/7.
Stojí za to připomenout, že flex-grow funguje pouze pro hlavní osu (dokud nezměníme její směr).
Flex Shrink
Flex-shrink je přesným opakem flex-grow. Určuje, jak moc se může čtverec zmenšit.
Flex-shrink se používá, když se prvky nevejdou do nádoby.
Určíte, které prvky se mají zmenšit a které ne. Ve výchozím nastavení je hodnota flex-shrink pro každý čtverec 1. To znamená, že čtverce se budou zmenšovat, jak se kontejner zmenšuje.
Nastavíme flex-grow a flex-shrink na 1:
Nyní změňme hodnotu flex-shrink pro třetí čtverec na 0. Není povoleno se zmenšovat, takže jeho šířka zůstane 120px:
Je třeba si uvědomit, že flex-shrink je založen na proporcích. To znamená, že pokud čtverec má smrštění 6 a zbytek má smrštění 2, znamená to, že se náš čtverec bude smršťovat třikrát rychleji než ostatní.
Flex
Flex nahrazuje flex-grow, flex-shrink a flex-base.
Výchozí hodnoty jsou 0 (růst), 1 (zmenšování) a auto (základ).
Vytvoříme dva čtverce:
Čtverec#one (flex: 2 1 300 px; ) .square#two ( flex: 1 2 300 px; )
Oba čtverce mají stejnou flex-bázi. To znamená, že oba budou mít šířku 300 pixelů (šířka kontejneru: 600 pixelů plus okraj a odsazení).
Ale když nádoba začne narůstat, první čtverec (s největším ohebným růstem) poroste dvakrát rychleji a druhý čtverec (s největším ohebným smrštěním) se bude smršťovat dvakrát rychleji.
Jak věci rostou a zmenšují se
Když se první čtverec zvětší, nezvětší dvojnásobnou velikost než druhý čtverec, a když se druhý čtverec zmenší, nebude poloviční než první. Je to proto, že flex-grow a flex-shrink jsou zodpovědné za rychlost růstu a kontrakce.
Trochu matematiky
Počáteční velikost kontejneru: 640 pixelů. Odečtěte 20 pixelů z každé strany pro výplň a zbyde nám 600 pixelů, což stačí na dva čtverce.
Když šířka kontejneru dosáhne 430 pixelů (ztráta 210 pixelů), první čtverec (flex-shrink: 1) ztratí 70 pixelů. Druhý čtverec (flex-shrink: 2) ztratí 140 pixelů.
Když se kontejner zmenší na 340 pixelů, ztratíme 300 pixelů. První čtverec ztratí 100px, druhý - 200px.
Totéž se děje s flex-grow.
Flexbox představuje nový způsob zobrazení polí v rozvržení pomocí css3 a je navržen tak, aby usnadnil vzájemné umístění prvků. V tomto článku se podíváme na nejnovější syntaxi modelu flexbox. Verze prohlížečů se v dnešní době mění poměrně rychle, takže budete vědět, kdy je model flexbox široce podporován v reálných projektech.
K čemu je Flexbox?
Vývojáři již dlouho používají tabulky, prvky float, inline-block a další vlastnosti CSS, aby blokům dodali požadované rozložení. Žádný z výše uvedených nástrojů však nebyl navržen pro tvorbu složitých stránek a aplikací, které se dnes používají téměř v každém projektu. Jednoduché věci, jako je vertikální centrování, bylo docela obtížné dosáhnout. Vytváření layoutu založeného na tekutých mřížkách je obecně považováno za vrchol profesionality, a proto se CSS frameworky založené na mřížkách rozšířily. Pokud tedy mnoho projektů často používá fluidní mřížky, bloky stejné výšky, vertikální centrování bloků atd., pak vyvstává otázka: "Proč ještě neexistuje funkce, která by tyto věci umožňovala rychle a snadno?"
Flexbox si klade za cíl všechny tyto problémy vyřešit!
Stav specifikace a podpora prohlížeče
Model flexboxu se vyvíjí již čtvrtým rokem. Prohlížeče používají různé experimentální verze specifikace. V září 2012 dosáhla 3. revize syntaxe Flexbox skupinou vývojářů W3C status kandidáta W3C. To znamená, že W3C schvaluje aktuální syntaxi a dává prohlížečům povolení používat předpony dodavatele.
Historie změn specifikace Flexbox:
- Pracovní návrh z července 2009 (zobrazení: krabice;)
- Pracovní návrh z března 2011 (displej: flexbox;)
- Pracovní návrh z listopadu 2011 (displej: flexbox;)
- Pracovní návrh z března 2012 (displej: flexbox;)
- Pracovní návrh z června 2012 (zobrazení: flex;)
- Září 2012 Doporučení kandidáta (zobrazení: flex;)
Prohlížeče nyní mají rychlou podporu pro Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 již Flexbox podporují. Pro zobrazení příkladů doporučuji použít jeden z těchto prohlížečů.
Pojem a terminologie
I když je flexbox navržen tak, aby usnadnil uspořádání bloků v rozvržení, což bylo v minulosti často obtížné a v některých situacích problematické, vyřešení těchto problémů pomocí Flexboxu v reálných projektech bude ještě nějakou dobu trvat. Terminologie modelu může ztížit použití. Podívejme se, jak funguje model Flexbox.
Model Flexbox obsahuje flex nádobu a flex položky. Flex kontejner musí mít vlastnost display nastavenou na flex nebo inline-flex . S hodnotou flex je kontejner blokovým prvkem a s inline-flex je to vložený prvek.
Příklad deklarace flex kontejneru:
Flex-kontejner ( displej: -webkit-flex; displej: flex; )
Flex kontejner je rodičem flexibilních položek. Ohybných bodů může být tolik, kolik chcete. Vše mimo flex kontejner a uvnitř flex položek je zobrazeno jako obvykle. Flexbox tedy definuje, jak budou flex položky uspořádány uvnitř flex kontejneru.
Flex položky jsou umístěny uvnitř ohebné nádoby podél ohebné linie. Ve výchozím nastavení je v flex kontejneru pouze jedna flex linka. Zde je příklad se dvěma položkami, které jsou standardně uspořádány podél ohybové čáry zleva doprava:
Flex-container( display: -webkit-flex; display: flex; width: 700px; background-color: green; margin: 20px auto; ) .flex-item( background-color: red; width: 100px; height: 100px; okraj: 5px barva: #fff )
Režimy psaní (režimy zobrazení obsahu)
Důležitou součástí přizpůsobení flexboxu je změna směru flex linky. Ve výchozím nastavení se směr ohybové čáry shoduje se směrem textu: zleva doprava, shora dolů.
Ve specifikaci se objevil nový modul režimů zápisu. Umožňuje změnit směr textu zprava doleva, nebo i svisle.
Tento modul je ve vývoji, ale Chrome podporuje vlastnost direction CSS. Pokud v předchozím příkladu nastavíme vlastnost direction: rtl (zprava doleva), změní se nejen směr zobrazení obsahu zprava doleva, ale i směr flex čáry, což povede ke změně rozložení.
Body ( direction: rtl; ) .flex-container ( display: -webkit-flex; display: flex; width: 700px; height: 240px; background-color: green; margin: 10px auto; ) .flex-item ( background- barva: červená; šířka: 100px;
Z tohoto příkladu můžete vidět, proč je terminologie Flexbox v tuto chvíli tak abstraktní. Nemůžeme jednoduše označit „vpravo“, „vlevo“, „dolů“, „nahoře“, když nemáme ponětí, v jakém jazyce je stránka napsána (možná arabština – styl psaní zprava doleva!).
Hlavní a příčná osa
Aby byl Flexbox nezávislý na režimu zobrazení obsahu směru, používá koncept hlavní osy a příčné osy. Flex linky sledují hlavní osu. Příčná osa je kolmá na hlavní osu. Názvy počátečních a koncových bodů a také směr každé osy:
- Hlavní Start
- Hlavní konec
- Hlavní směr (někdy nazývaný směr toku)
- Křížový start
- Křížový konec
- Křížový směr
Než budeme pokračovat, je důležité porozumět terminologii hlavní a příčné osy. Vše v modelu flexboxu je umístěno vzhledem k těmto dvěma osám. Ve všech našich příkladech byl režim prolnutí režimu psaní zleva doprava, shora dolů. Ale měli byste mít na paměti, že tomu tak nemusí být vždy.
Vlastnosti nádoby Flex:
Flex-směr
Vlastnost flex-direction umožňuje měnit osy flex kontejneru. Ve výchozím nastavení je vlastnost flex-direction řádek. V tomto případě jsou flexibilní položky uspořádány podle režimu psaní. Znovu vám připomeňme, že to znamená, že směr je zleva doprava, shora dolů (ve výchozím nastavení).
Další možné hodnoty:
- row-reverse : Main Start a Main End jsou obrácené. I když je režim zápisu specifikován jako ltr (zleva doleva), budou položky flex stále umístěny zprava doleva.
- sloupec : Hlavní osa a křížová osa jsou zaměněny. Pokud je režim zobrazení obsahu vodorovný, budou flexibilní položky stále umístěny svisle.
- column-reverse : podobné sloupci, ale obrácené.
Změňme vlastnost flex-direction na sloupec v předchozím příkladu:
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; výška: 100px; okraj: 5px; )
Nyní jsou ohebné položky umístěny svisle.
ospravedlnit-obsah
justify-content řídí umístění flexibilních položek podél hlavní osy. Možné hodnoty:
- flexibilní start (výchozí)
- ohebný konec
- centrum
- prostor-mezi
- prostor kolem
Podívejme se na příklad s justify-content: vycentrovat tak, aby flex položky byly vystředěny na hlavní osu:
Flex-container ( display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; výška: 100px; okraj: 5px; )
flex-start, flex-end a center fungují spojením podél hlavní osy. Ale prostor-mezi a prostorem-kolem rozděluje volný prostor mezi ohebné předměty určitým způsobem. Zde je diagram ze specifikace, který ukazuje distribuci justify-content :
zarovnat-položky
align-items je další vlastnost k justify-content . align-items řídí zobrazení ohebných položek vzhledem ke kolmé ose. Možné hodnoty:
- flexibilní start (výchozí)
- ohebný konec
- centrum
- základní linie
- úsek
Podívejme se na použití vlastnosti align-items:center, která umožňuje, aby byly ohebné položky vertikálně vystředěny kolem kolmé osy:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; ) .flex-item ( barva pozadí: červená; šířka: 100px; výška: 100px; okraj: 5px; )
Takže flex-start, flex-end a střed jsou vždy umístěny spojené dohromady. Hodnota roztažení je poměrně jednoduchá: způsobí, že se ohebné položky roztáhnou od Cross Start do Cross End, tedy vertikálně vzhledem k ohebnému kontejneru. základní linie nutí ohebné položky, aby byly umístěny podél základní linie. Základní linie se vypočítá na základě inline obsahu flexibilních položek. Zde je lepší vysvětlení toho, jak tyto hodnoty fungují:
Flex-wrap
Ve všech uvažovaných příkladech měla ohebná nádoba jednu ohebnou linku. Použití vlastnosti flex-wrap vám umožní vytvořit flex kontejner s různým počtem flex linek. Možné hodnoty:
- nowrap (výchozí)
- wrap-reverse
Pokud je flex-balení nastaveno na omotání , jsou do flex položek zahrnuty další flex šňůry, ale pouze v případě, že flex položky nemají dostatek místa, aby se vešly na jednu flex šňůru. Další ohybové čáry jsou přidány ve směru kolmém k ose.
Příklad použití flex-wrap:
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 300 pixelů; výška: 100 pixelů; okraj: 5 pixelů; )
Hodnota obtékání-obrácená je podobná hodnotě obtékání, kromě toho, že jsou přidány nové ohybové čáry v opačném směru podél kolmé osy.
zarovnat-obsah
align-content mění chování vlastnosti flex-wrap. Tato hodnota je podobná align-items, ale místo zarovnání flexibilních položek zarovná flex linky. Jak můžete očekávat, hodnoty jsou podobné:
- roztáhnout (výchozí)
- flex-start
- ohebný konec
- centrum
- prostor-mezi
- prostor kolem
Princip fungování těchto hodnot je podobný justify-content a align-items.
Příklad align-content: center
flex-flow
Tato vlastnost kombinuje vlastnosti flex-direction a flex-wrap.
flex-flow:
Flex-container ( -webkit-flex-flow: column nowrap; flex-flow: column nowrap; )
Vlastnosti pružných prvků
Flexibilní položka je podřízený blok flexibilního kontejneru. Obsah ohebného kontejneru se vztahuje na ohebný předmět tohoto kontejneru. Obsah položky flex se zobrazí jako obvykle. Například, když je v platnosti vlastnost float, flexibilní položky na ni žádným způsobem nereagují. Plováky mohou být také umístěny uvnitř samotného ohebného předmětu.
Jak se říká, flex položky mají hlavní velikost a křížovou velikost. Main Size je velikost ohebné položky ve směru hlavní osy a Cross Size je ve směru příčné osy. Ve skutečnosti může být šířka nebo výška ohebného předmětu hlavní velikost a křížová velikost v závislosti na ose ohebného kontejneru.
Podívejme se na vlastnosti, které regulují chování flex položek.
Objednávka
Pořádek je nejjednodušší vlastnost. Pořadí flexibilních položek je určeno uspořádáním flexibilních položek v HTML. V tomto příkladu změníme hodnotu vlastnosti objednávky jedné flexibilní položky na -1 a uvidíme, jak to změní pořadí ostatních flexibilních položek.
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; šířka: 700px; výška : 240px; barva-pozadi: zelená; okraj: 10px automaticky : -1;
Tato vlastnost může být užitečná pro usnadnění přístupu, když by pořadí flexibilních položek v HTML mělo být jednosměrné, ale zobrazení flexibilních položek v jiném pořadí.
Okraj
Pravděpodobně znáte okraj: automatický efekt. Flexbox dělá něco podobného, ale s ještě více schopnostmi. „auto“ zabírá místo navíc. Tuto vlastnost lze použít pro různé umístění pružných předmětů.
Například deklarujme margin-right: auto;
pro první flexibilní položku, přičemž napravo od ní poskytne veškerý možný volný prostor:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; výška: 100px; okraj: 5px; ) .flex-item:first-child( pravý okraj: auto; )
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; výška: 100px; okraj: 5px; ) .flex-item:first-child( margin: auto; )
zarovnat se
Vlastnost align-self položky přepíše vlastnost align-items kontejneru Flex. Možné hodnoty podobné align-items :
- roztáhnout (výchozí)
- flex-start
- ohebný konec
- centrum
- základní linie
V tomto příkladu položkám přiřadíme různé hodnoty vlastnosti align-self:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; min-výška:70px; okraj: 5px; ) .item1 ( -webkit-align-self: flex-start; align-self: flex-start; ) . item2 ( -webkit-align-self: flex-end; align-self: flex-end; ) .item3 ( -webkit-align-self: center; align-self: center; ) .item4 ( -webkit-align-self : baseline; align-self: baseline; .item5 ( -webkit-align-self: baseline; align-self: baseline; padding: 2em 0; ) .item6 ( -webkit-align-self: stretch; align-self: úsek)
flex
Konečně jsme dosáhli vlastnosti flex ve Flexboxu. Flex určuje, jak budou flexibilní položky využívat dostupný prostor podél hlavní osy. Zvažme každou z možných hodnot.
Flex:
Tato syntaxe určuje, jak velká část flexibilní položky by měla zabírat celkovou šířku kontejneru flex. V následujícím příkladu bude první flexibilní položka zabírat 2/4 volného místa a zbývající dvě flexibilní položky zaberou každá 1/4:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; min-výška:70px; okraj: 5px; ) .item1 ( -webkit-flex: 2; flex: 2; ) .item2 ( -webkit-flex: 1 ; flex: 1 ) .item3 ( -webkit-flex: 1; flex: 1; )
Často musíte prvky rozmístit rovnoměrně po celé šířce. Chcete-li to provést, stačí nastavit hodnotu této vlastnosti na 1 a všechny položky flex budou rozmístěny po celé šířce kontejneru.
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; šířka: 700px; výška: 240px; barva pozadí: zelená; okraj: 10px automaticky; ) .flex-item ( barva pozadí: červená; šířka: 100px; min-výška:70px; okraj: 5px; ) .item1 ( -webkit-flex: 1; flex: 1; ) .item2 ( -webkit-flex: 1 ; flex: 1; .item3 ( -webkit-flex: 1; flex: 1; )
flex: počáteční
Položky Flex s touto hodnotou budou mít přísně pevnou šířku, ale pouze v případě, že je k dispozici volné místo (v případě potřeby se zmenšuje - stane se gumovou).
flex:auto
Flex body se stávají zcela gumovými podél hlavní osy. V Chrome 23.0.1271.95 nefunguje správně, takže je lepší použít flex: 1 .
flex: žádný
ohebné položky se stanou pevnou šířkou ve všech situacích
pokročilý flex
Vlastnost flex lze použít v režimu shrink k určení výběru flex-grow , flex-shrink a flex-base v jediné deklaraci: flex:
Ve většině případů není tato syntaxe vyžadována. Použití této zkratky navíc vyžaduje hluboké porozumění modelu Flexbox. Každou z vlastností flex-grow , flex-shrink a flex-base můžete specifikovat. Důrazně doporučuji nepoužívat tuto zkratku: výchozí je uvádět rozumnější hodnoty.
viditelnost
Když je implementována vlastnost viditelnosti: kolaps;
bude se lišit od hodnot viditelnost: skryté;
a zobrazení: žádné;
pro flexibilní položky. S hodnotou sbalení bude prvek používat velikost kříže flexibilního kontejneru, ale neovlivní prostor hlavní osy. To může být užitečné pro dynamické přidávání nebo odebírání flexibilních položek, aniž by to ovlivnilo Cross Size kontejneru Flex.
Aktuálně viditelnost: kolaps;
