Neuvěřitelný výkon flexibře

Sep 12, 2025

jak

FlexBox nebo flexibilní rozložení krabic, je výkonný modul rozložení CSS, který poskytuje web designéry a vývojáře efektivní a jednoduchý způsob, jak rozložit, vyrovnat a distribuovat prvky v kontejneru. Řeší mnoho rozložení problémů, které jsme se snažili vyřešit dlouho.

Základy FlexBox

V jeho nejzákladnější podobě se FlexBox skládá ze dvou prvků: Flex Containal (nebo Flex Rodič) a Flex Položky (Flex Děti). Kontejner FLEX je obsahující prvek (jako je divák ) Vzhledem k vlastnosti zobrazení ohebný . Flex Položky jsou podřízené prvky kontejneru Flex, které mohou být manipulovány prostřednictvím různých vlastností zobrazení.

FLEX CONTAINERS A FLEX položky mají svůj vlastní rozsah vlastností, které lze kombinovat různými způsoby, jak vytvořit rozsah komplexních rozvržení. Položky uvnitř ohybové nádoby mohou být stanoveny vodorovně nebo svisle, zarovnány a distribuovány různými způsoby a natažené nebo zmenšit, aby se vešly do dostupného prostoru. Všechny tyto možnosti umožňují snadno vytvářet citlivé rozložení.

Jak používat FlexBox

Chcete-li začít používat Flexbox, musíte nejprve vytvořit kontejner FLEX (nadřazený prvek, který bude obsahovat vaše flexické položky). V tomto příkladu použijeme divák blok. Než budeme styl prvek, přidáme další tři divák Bloky uvnitř naší FLEX kontejneru působí jako položky FLEX. V tomto okamžiku budou položky stohovány.

S naším dítětem Div je na místě, můžeme nastavit vlastnost zobrazení rodičovského kontejneru ohebný .

 Flex Container {
Displej: Flex;
}

Rozvržení směry

Směr rozvržení je prostě směr, kterým se vaše prvky budou distribuovat. Výchozí směr kontejneru FLEX je řádek , který zobrazí podřízené prvky horizontálně. Rozvržení můžete přepnout do vertikálního nastavením směru sloupec .

 Flex Container {
Displej: Flex;
Flex-Směr: řada;
}

Flex Container {
Displej: Flex;
Flex-Směr: sloupec;
}

Který směr, který jste nastavili na kontejneru FLEX, je označován jako jeho "hlavní" směr, zatímco druhý směr, který jste si nevybrali, se stává směrem "Cross". Ve výchozím nastavení bude hlavní směr horizontální a směr kříže bude vertikální.

FlexBox také umožňuje zrušit rozložení. Když se obrátí, děti z kontejneru FLEX budou propojeny vpravo doleva (pokud je směr řádek ) nebo dole-to-top (pokud je směr sloupec ).

 Flex Container {
Displej: Flex;
Flex-Směr: řádek;
}

Flex Container {
Displej: Flex;
Směr FLEX: sloupec-reverzní;
}

To může být vhodné, pokud chcete zvrátit rozložení na menších obrazovkách.

Řekněme například na obrazovkách na ploše, které chcete zobrazit text na levé straně obrazovky a obrázek vpravo (viz obrázek Surfboard výše). Na mobilu by to mohlo přesunout obrázek pod textem. Zvednutím směru můžete zajistit, že místo toho se obraz zobrazí nad textem.

Upravte zarovnání

Nastavení FlexBoxu vám také poskytne dvě různé metody pro zarovnání obsahu: svisle a vodorovně. Zde jsou vaše horizontální možnosti zarovnání pro položky uvnitř kontejneru FLEX:

FLEX-START. : Položky nastavené směrem k počátečnímu řádku (vlevo, pokud nevrátíte rozložení)

centrum : Položky zaměřené v rámci řádku

Flex-End. : Položky nastavené na konec řádku (vpravo, pokud jste zrušili rozložení)

prostor mezi nimi : Položky rovnoměrně rozložené podél řádku

prostor-kolem : Položky rovnoměrně rozložené podél řádku, se stejným prostorem na obou stranách každého prvku

Takže kód může vypadat takto:

 Flex Container {
Displej: Flex;
Flex-Směr: řada;
Zarovnat obsah: Flex-Start | Flex-end | centrum | prostor mezi | prostor-kolem protáhnout se;
}

Zde jsou vaše vertikální možnosti zarovnání pro položky v kontejneru FLEX:

FLEX-START. : Položky zarovnané na vrchol řádku

centrum : Položky jsou soustředěny v rámci řádku

Flex-End. : Položky zarovnané na dno řádku

protáhnout se : Položky natažené přes výšku řádku

základní linie : Položky zarovnané na jejich základní linie (imaginární linie, na které se text sedí)

Kód může vypadat takto:

 Flex Container {
Displej: Flex;
Flex-Směr: řada;
Zarovnat předměty: Flex-Start | Flex-end | centrum | základní linie | protáhnout se;
}

Ve výchozím nastavení se děti FLEX kontejneru vždy snaží přizpůsobit jeden řádek. Pokud chcete změnit, můžete přidat zabalit atribut. To umožňuje dětem zabalit do nového řádku, pokud dojde mimo prostor.

 Flex Container {
Displej: Flex;
Flex-Wrap: Wrap;
}

Flex položky také dostat vlastní vlastnosti založené na flexe. Když je prvek umístěn uvnitř kontejneru FLEX, automaticky se stane flexem FLEX a je poskytováno vlastní sadu Flex-založených CSS stylů. Tyto styly řídicí lišty, zarovnání a pořadí zobrazení.

Flexibilní velikost

Flex Děti mohou změnit svou šířku nebo výšku (v závislosti na směru rozvržení kontejneru) pro vyplnění dostupného prostoru.

WebFlow vám poskytne tři přednastavené možnosti pro velikost flexe: v případě potřeby, vyplňte prázdný prostor a nezmenšen. Všimněte si, že každý podřízený prvek může mít vlastní nastavení, která umožňuje množstvím možností designu.

 Flex Položka {
Flex-Shrink: & lt; číslo & gt;
Flex-růst: & lt, číslo & gt;
FLEX-BASE: & lt; délka & gt; | auto;
}

Podívejme se na to, co každý z těchto možností:

V případě potřeby zmenšovat: Rozměry položky na základě šířky / výšky nebo jejího obsahu. Položka nebude růst větší, než potřebuje, ale může se zmenšit na minimální velikost, aby se zabránilo přetečení
Vyplňte prázdné místo: Umožňuje rozšíření položky k vyplnění všech dostupných prostor uvnitř jeho rodiče. Pokud to nastavíte na všechny položky v kontejneru FLEX, rozšiřují se, aby zabírali stejné množství prázdného prostoru
Nezmenšte se: Rozměry položky založené na jeho šířce / výšce nebo jeho obsahu, ale neumožňuje mu zmenšit, i když to způsobí přetečení

Flex Položky mohou mít také vlastní nastavení zarovnání, které přepíše výchozí zarovnání nastavené podle rodičovského kontejneru FLEX. Tyto uspořádání se chovají, jak bylo vysvětleno dříve.

 Flex Položka {
Displej: Flex;
Flex-Směr: řada;
Zarovnat předměty: Flex-Start | Flex-end | centrum | základní linie | protáhnout se;
}

Ve výchozím nastavení se zobrazují zobrazení položek Flex ve stejném pořadí, protože se zobrazují ve zdrojovém kódu. S FlexBoxem můžete toto chování přepsat, abyste zajistili zobrazení prvků přesně požadované pořadí.

Čtyři hlavní možnosti, které zde můžete použít:

Auto : Výchozí hodnota, která objednává položky, jak jsou ve zdroji
První : Položka se objeví nejprve v kontejneru FLEX
Poslední : Položka se zobrazí naposledy v kontejneru FLEX
Zvyk : Můžete přizpůsobit objednávku, ve které se zobrazí položka

Vlastní objednávka může být definována jako číslo, které určuje pořadí, ve kterém se objeví položka FLEX uvnitř kontejneru FLEX.

 Flex Položka {
OBJEDNÁVKA: <<<<<;
}

Proč bych ho měl použít?

Jsem rád, že jsi zeptal! Použití flexbox umožňuje snadno vytvářet citlivé rozložení, které byly kdysi velmi obtížné (nebo nemožné) vytvořit se staršími moduly rozložení CSS.

Podívejte se na příklady na obrázku níže - mnozí jste pravděpodobně již viděli přes web. Téměř všechny by měly značné množství CSS (zejména přes různé velikosti obrazovek), ale pro dosažení flexibře trvá pouze několik jednoduchých řádků. Chcete-li zobrazit tyto příklady v akci, navštivte FLEXBOX.WEBFLOW.COM. .

Neuvěřitelný výkon flexibře

Základy FlexBox

Jak používat FlexBox

Rozvržení směry

Upravte zarovnání

Flexibilní velikost

Proč bych ho měl použít?

jak - Nejoblíbenější články

Začínáme s webvrem

Krok za krokem: Jak napodobovat olejové barvy v Corel Malter

Vytvořte jednoduchý barevný graf

Úvod do testování předního financování

7 Zahradní způsoby, jak ovlivnit chování uživatele

Jak vytvořit krásný akvarel krajinomalba

Vytvořit perspektivu tím, že deformuje vaše textury ve Photoshopu

Kombinujte tradiční a digitální dovednosti k vytvoření komiksu

Kategorie