Vše o vlastnostech Flexboxu

Konceptem vlastností Flexboxu je poskytnout kontejneru možnost automaticky změnit šířku, výšku a pořadí svých položek tak, aby co nejlépe zaplnil dostupný prostor. To může být opravdu užitečné pro umístění položek v různých velikostech obrazovky a zařízeních. Položky jsou rozbaleny, aby zaplnily jakýkoli volný prostor, nebo se zmenšily, aby nedošlo k přetečení.

Mřížka CSS Flexbox pro začátečníky

CSS je jednou z prvních a nejjednodušších věcí, které se lze při vývoji a designu webových stránek naučit, ale neměňte její jednoduchost za nedostatek funkcí. Má řadu úžasných funkcí a možností připravených k použití, jedním z nich je jeho relativně nový modul rozvržení: vlastnosti Flexboxu.

Vlastnosti Flexboxu jsou jedním z novějších rozvržení dostupných v CSS3 a je toho o něm mnoho poznat. Zde se dozvíme o rozvržení a způsobu jeho použití. Než začneme, zde je však trochu pozadí o vlastnostech Flexboxu:

Co jsou režimy rozvržení?

Zjednodušeně řečeno, mřížka CSS Flexbox je režim rozvržení. CSS má řadu existujících režimů rozvržení. Režim rozvržení bloku (jako displej: blok) existuje již dlouhou dobu. Rozvržení bloků je dobrou volbou pro stylování úplných dokumentů. Ve skutečnosti webový prohlížeč standardně považuje několik prvků, jako jsou divy a odstavce, za úroveň bloku.

Další běžný režim rozvržení je vložený. Silná značka, vstupní značka a značka kotvy jsou příklady prvků vložené na úrovni. Vývojářské nástroje Google Chrome vám dokonce umožní zobrazit „výpočetní styl“ prvku a určit vlastnosti a hodnoty CSS, které byly použity na prvky, které vývojář výslovně nenastavil.

Relativně novější rozvržení Flexboxu (Flexibilní box) bylo navrženo jako efektivnější způsob rozvržení, zarovnání a rozdělení prostoru mezi položkami kontejneru, i když je velikost těchto položek dynamická nebo neznámá. Proto termín „flexibilní“.

Koncept Flexbox Properties

Nejdůležitější věcí na vlastnostech Flexboxu je to, že je směrově agnostický. Zatímco rozvržení bloku je svislé a inline rozvržení je vodorovné, Flexbox není. Blokování a inline dobře fungují ve správných situacích, ale chybí jim flexibilita pro podporu složitých nebo velkých aplikací, zejména pokud jde o změnu orientace, roztažení, zmenšení, změnu velikosti a jiné změny rozměrů prvků.

Kde se používají vlastnosti Flexboxu?

Stejně jako jakékoli jiné rozvržení CSS se Flexbox v určitých situacích nejlépe používá. Zejména je vhodné pro malá rozvržení a komponenty aplikace. U rozložení ve větším měřítku by bylo rozvržení mřížky moudřejší volbou.

Proč je Flexbox preferován?

Mnoho vývojářů a designérů dává přednost vlastnostem Flexboxu, kdykoli mohou (někdy až příliš často!). Důvodem je, že vlastnosti Flexboxu se snáze používají; umístění prvků je mnohem jednodušší, takže můžete získat složitější rozvržení s menším kódováním. Jinými slovy, proces vývoje je jednodušší.

Průvodce vlastnostmi Flexboxu

Nyní, když víte něco o vlastnostech Flexboxu a jak a proč to funguje, je zde podrobný průvodce rozložením. Model rozvržení se skládá z nadřazeného kontejneru, který se také nazývá „flex kontejner“. Bezprostřední děti z tohoto kontejneru se nazývají „flex položky“.

Rozložení prošlo několika iteracemi a změnami syntaxe v průběhu let od svého prvního návrhu v roce 2009. Nejnovější specifikace Flexbox je podporována v následujících webových prohlížečích:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Terminologie použitá ve vlastnostech Flexboxu

Zde je několik základních pojmů používaných v rozložení vlastností Flexboxu:

  • Displej: Tento příkaz se používá k definování flex kontejneru. Mohlo by to být inline nebo block, v závislosti na tom, že také definuje flex obsah pro všechny položky v kontejneru. Příklad:

.container (

displej: flex; / * nebo inline-flex * /

)

  • Pořadí: Položky Flex jsou ve výchozím nastavení rozloženy podle pořadí zdrojů, ale vlastnost 'order' může řídit pořadí, ve kterém se položky objeví v kontejneru. Příklad:

.item (

objednat: ;

)

  • Směr ohybu : Tímto příkazem se nastavuje hlavní osa, která definuje směr, ve kterém jsou položky ohybu umístěny uvnitř kontejneru. Položky flex mohou být primárně rozloženy ve svislém nebo vodorovném směru. Příklad:

.container (

flex-direction: row | row-reverse | column | column-reverse;

)

  • Flex-grow: Tato objednávka definuje schopnost položky flex se automaticky zvětšit, pokud má místo. Může akceptovat hodnotu bez jednotky, která bude sloužit jako poměr. Tato hodnota určuje, kolik místa by měla položka zabrat v flex kontejneru. Například, pokud mají všechny položky flex-grow jako 1, zbývající prostor v kontejneru bude rovnoměrně rozdělen mezi všechny děti. Pokud je hodnota 2, zbývající prostor zabere dvakrát tolik místa než zbytek. Příklad:

.item (

flex-grow:; / * výchozí 0 * /

)

  • Flex-scvrknutí: Toto dělá pravý opak jako flex-grow, v tom, že scvrkne flex položky, pokud je to nutné. Příklad:

.item (

flex-shrink:; / * výchozí 1 * /

)

  • Flex-based: Tato objednávka definuje výchozí velikost prvků před distribucí zbytku prostoru. Může to být délka, například 5rem nebo 20%, nebo klíčové slovo. Klíčové slovo „auto“ označuje, že se měří šířka a výška položky, a klíčové slovo „obsah“ označuje, že položka je na základě svého obsahu dimenzována. Příklad:

.item (

flex-based: | auto; / * výchozí auto * /

)

  • Flex: Toto je kombinovaná zkratka pro všechny výše uvedené vlastnosti: flex-grow, flex-based a flex-shrink. Výchozí hodnota je „0 1 auto“.

.item (

flex: žádný | (||)

)

  • Zarovnat obsah: Toto pořadí definuje zarovnání hlavní osy a pomáhá rozdělit další volné místo, pokud zbývá, když jsou položky nepružné nebo dosáhly své maximální velikosti. To také pomáhá řídit zarovnání položky, když dojde k přetečení.

.container (

justify-content: flex-start | flex konec | centrum | mezerník | vesmír-kolem;

)

  • Zarovnat položky: Slouží k definování výchozího chování rozvržení flexibilních položek na příčné ose aktuální linie. Jde v podstatě o verzi „justify-content“ na příčné ose, která je kolmá k hlavní ose. Příklad:

.container (

Zarovnat položky: flex-start | flex-end | centrum | základní | protáhnout se;

)

  • Zarovnat obsah: Toto pořadí zarovná řádky kontejneru v případě, že je na příčné ose další prostor. Je to podobné jako „justify-content“, ale místo hlavní osy pro příčnou osu. Pokud existuje pouze jeden řádek položek flex, nemá tato vlastnost žádný účinek. Příklad:

.container (

align-content: flex-start | flex-end | centrum | mezerník | vesmír-kolem | protáhnout se;

)

Používání vlastností Flexboxu

Chcete-li použít rozvržení Flexboxu, můžete jednoduše nastavit vlastnost zobrazení na nadřazeném prvku HTML, například níže:

.flex-container (

displej: -webkit-flex; / * Safari * /

displej: flex;

)

Pokud dáváte přednost zobrazení jako vložený prvek, můžete napsat:

.flex-container (

displej: -webkit-inline-flex; / * Safari * /

displej: inline-flex;

)

Vyžadujete pouze, aby tato vlastnost byla nastavena na nadřazený kontejner flex a jeho bezprostřední položky flex. Děti kontejneru se automaticky stanou flex předměty.

Doporučené kurzy

  • Online kurz zdarma jQuery
  • Online kurz o bezplatném úhlovém JS
  • Online školení na Mudboxu
  • Certifikační školení ve Ruby zdarma

Vlastnosti Flexboxu - Vlastnosti kontejneru Flex

Existuje mnoho způsobů, jak seskupit vlastnosti Flexboxu, a nejjednodušší způsob, jak se o nich dozvědět, je jejich rozdělení na vlastnosti kontejneru Flex a položky. Právě jsme zakryli některé z vlastností flex kontejneru výše. Podívejme se na zbytek:

  • Flex-direction: řádek nebo sloupec

Vlastnost ohybu může být uspořádána jako sloupce svisle nebo vodorovně jako řádky. Ve směru řádků jsou položky flex ve výchozím nastavení naskládány zleva doprava. Řádek-zpět změní tento směr zprava doleva. Směr sloupce je ve výchozím nastavení shora dolů a funkce zpětného sloupce to obrátí směrem dolů.

  • Flex-wrap: nowrap nebo wrap

Vlastnost flex-wrap řídí, zda jsou děti flex kontejneru rozloženy do více nebo jednoduchých linek a směr, ve kterém jsou nové linky naskládány. Hodnota nowrap vidí položky flex zobrazené v jednom řádku, zmenšené tak, aby se ve výchozím nastavení přizpůsobily šířce kontejneru. Hodnota obtékání vidí flex položky zobrazené v různých řádcích ve směru zleva doprava nebo shora dolů. Chcete-li změnit pořadí, můžete přidat obtékání. Výchozí hodnota je nowrap.

  • Flex-flow

Tato vlastnost je v podstatě zkratka pro nastavení vlastností flex-direction a flex-wrap dohromady. Výchozí hodnota je 'row nowrap'. Příklad:

.flex-container (

flex-flow: ||

)

  • Zarovnat obsah

Vlastnost justify-content má čtyři hodnoty: flex-start pro zarovnání položek k levé straně kontejneru; flex-end pro zarovnání položek na pravou stranu; střed pro zarovnání se středem; mezera mezi, aby se zarovnaly položky se stejnými rozestupy mezi nimi, s první a poslední položkou zarovnanou k okrajům kontejneru; a mezerou pro zarovnání ohebné položky se stejnými rozestupy kolem nich, včetně první a poslední položky. Výchozí hodnota je Flex-start.

  • Zarovnat položky

Tato vlastnost má pět hodnot: roztažení pro zvětšení ohebných položek, aby vyplnily celou šířku nebo výšku od příčného začátku po příčný konec kontejneru; flex-start pro stohování položek na křížovém začátku; flex-end pro stohování předmětů na příčném konci; střed pro zarovnání položek ke středu příčné osy; a základní čáru pro zarovnání položek tak, aby jejich základní linie byly zarovnány. Výchozí hodnota je Stretch.

  • Zarovnat obsah

Tato vlastnost zarovná čáry ohebného kontejneru, když je v příčné ose další prostor. Jeho hodnoty jsou: natáhnout pro distribuci prostoru po každém řádku; flex-start pro stohování předmětů směrem ke křížovému začátku; flex-end pro stohování předmětů směrem k cross-end; střed pro stohování předmětů ve středu příčné osy; prostor kolem dokola rovnoměrně distribuovat prostor kolem flex položek. Výchozí hodnota je stretch.

Vlastnosti Flexboxu - Vlastnosti Flex položky

Nyní, když víte o vlastnostech kontejneru Flexbox, pojďme se podívat na vlastnosti položky:

  • Objednat

Tato vlastnost řídí pořadí vzhledu dětí flex kontejneru. Ve výchozím nastavení jsou uspořádány v flex kontejneru.

.flex-item (

objednat: ;

)

Položky flex můžete změnit, aniž byste museli restrukturalizovat HTML kód. Výchozí hodnota je nula.

  • Zarovnejte se

Tato vlastnost umožňuje přepsat výchozí zarovnání konkrétní položky flex. Pro tuto vlastnost můžete použít hodnoty z zarovnaných položek.

.flex-item (

align-self: auto | flex-start | flex-end | centrum | základní | protáhnout se;

)

Automatická hodnota v zarovnání-self se vypočítá podle hodnoty položek zarovnání na nadřazeném prvku. Pokud prvek nemá nadřazeného objektu, použije se místo toho úsek.

Základní příklady

To je vše, co potřebujete vědět pro použití rozvržení mřížky CSS Flexbox. Nyní je čas nacvičit, co jste se naučili. Zde je několik příkladů, které vám ukážou, jak se všechny tyto vlastnosti spojují. Začněme něčím naprosto jednoduchým:

.parent (

displej: flex;

výška: 300px;

)

.child (

šířka: 100px;

výška: 100px;

marže: auto;

)

Toto je příklad dokonalého centrování. Hodnoty výšky a šířky lze podle potřeby změnit. Klíčem je zde nastavení okraje na „auto“, aby ohebný kontejner automaticky absorboval jakýkoli další prostor. Prostě jednoduché!

Nyní přejdeme k přidání dalších vlastností: seznam se šesti položkami pevných rozměrů, které lze automaticky přizpůsobit. Musí být rovnoměrně rozloženy na vodorovnou osu.

.flex-container (

displej: flex;

justify-content: space-around;

)

Dále se pokusíme vystředit navigaci orientovanou na střed pro obrazovky střední velikosti a na malých zařízeních ji upravit na jeden sloup.

/ * Velké * /

.navigation (

displej: flex;

flex-flow: zábal řádku;

justify-content: flex-end;

)

/ * Střední obrazovky * /

@media all a (max-width: 800px) (

.navigation (

justify-content: space-around;

)

)

/ * Malé obrazovky * /

@media all a (max-width: 500px) (

.navigation (

flex-direction: sloupec;

)

)

Je čas udělat tento krok dále! Vyzkoušejte první mobilní rozložení se třemi sloupci, zápatí a záhlaví plné šířky a nezávislé na pořadí zdrojů.

.wrapper (

displej: flex;

flex-flow: zábal řádku;

)

/ * Řekneme, že všechny položky mají šířku 100% * /

.header, .ain, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Spoléháme se na objednávku zdroje pro první mobilní přístup * /

/ * Střední obrazovky * /

@media all a (min-width: 600px) (

.aside (flex: 1 auto; )

)

/ * Velké obrazovky * /

@media all a (min-width: 800px) (

.main (flex: 2 0px; )

.aside-1 (pořadí: 1; )

.main (order: 2; )

.aside-2 (pořadí: 3; )

.footer (objednávka: 4; )

)

Závěr

Toto jsou jen některé základní příklady. S rozložením mřížky CSS Flexbox si můžete hrát mnohem víc a jsou absolutně neocenitelní, pokud chcete vytvořit responzivní webovou stránku.

Doporučené články

Zde jsou některé články, které vám pomohou získat více podrobností o vlastnostech flexboxu, kódu flexboxu a také o mřížce css flexboxu, takže stačí projít odkaz, který je uveden níže.

  1. HTML vs XML - hlavní rozdíly
  2. CSS3 vs CSS - Jak se liší? (Infograph)
  3. HTML vs. CSS Top Differences
  4. HTML5 vs. Flash

Kategorie:

Nástroje pro vývoj webových aplikací