A FLEXBOX hihetetlen ereje

Sep 13, 2025

kézikönyv

Flexbox vagy a Flexible Box Layout, egy erőteljes CSS layout modult ad webes tervezők és fejlesztők hatékony és egyszerű módja annak, hogy állapítson meg, align és terjesztésére elemek egy tartályban. Sok elrendezési problémát megold, amit sokáig megoldottunk.

Flexbox alapok

A legalapvetőbb formában a Flexbox két elemből áll: Flex tartály (vagy flex szülő) és flex elemek (Flex Gyermekek). A Flex tartály egy tartalmú elem (például a div ) A kijelző tulajdonságának megadása Flex . A Flex elemek egy rugalmas tartály gyermek elemei, amelyeket különböző megjelenítési tulajdonságokkal lehet manipulálni.

Flex tartályok és flex elemek mindegyike saját olyan tulajdonságokkal rendelkezik, amelyek különböző módon kombinálhatók a komplex elrendezések széles választékának létrehozására. A rugalmas tartályon belüli elemeket vízszintesen vagy függőlegesen lehet elhelyezni, összehangolva és elosztva különböző módon, és feszítve vagy zsugorodva, hogy megfeleljen a rendelkezésre álló helynek. Mindezek a lehetőségek lehetővé teszik, hogy könnyen hozzon létre érzékeny elrendezést.

A FLEXBOX használatának módja

A FLEXBOX használatához először létre kell hoznia a FLEX tartályt (a flexi elemeket tartalmazó szülőelemet). Ebben a példában használjuk a div Blokk. Mielőtt stílusunkat az elemet, adjunk hozzá még háromat div blokkok a Flex tartályban, hogy hajlítsa meg a flex elemeket. Ezen a ponton az elemek halmozódnak.

A gyermekünkkel a helyükön beállíthatjuk a szülő konténer megjelenítési tulajdonát Flex .

 FLEX CONTAINER {
Kijelző: FLEX;
}

Elrendezési utasítások

Az elrendezés iránya egyszerűen az az irány, amit az elemek elosztanak magukat. A Flex tartály alapértelmezett iránya sor , amely vízszintesen jeleníti meg a gyermek elemeket. Az elrendezést függőlegeshez kapcsolhatja az irány beállításával oszlop .

 FLEX CONTAINER {
Kijelző: FLEX;
Flex irány: sor;
}

Flex tartály {
Kijelző: FLEX;
Flex irány: oszlop;
}

A Flex tartályon beállított irányt "fő" irányba mutatja, míg a másik irányt, amit nem választott, a "kereszt" irányba válik. Így alapértelmezés szerint a fő irány vízszintes lesz, és a keresztirány függőleges lesz.

A Flexbox lehetővé teszi az elrendezés visszafordítását is. Amikor megfordult, a flex tartály gyermekei jobbra kerülnek (ha az irány sor ) vagy alsó-to-to-to-to-to-to-to-to-to-to-to-to oszlop ).

 FLEX CONTAINER {
Kijelző: FLEX;
Flex irány: sor-fordított;
}

Flex tartály {
Kijelző: FLEX;
Flex irány: oszlop-fordított;
}

Ez hasznos lehet, ha a kisebb képernyők elrendezését szeretné megfordítani.

Például mondjuk az asztali képernyőkön, amelyet a képernyő bal oldalán és a jobb oldalon lévő képen szeretne megjeleníteni (lásd a fenti szörfdeszka képet). A mobilon ez a kép alatti képet mozgatja. Az irány megfordításával biztosíthatja, hogy a kép a szöveg fölé jelenjen meg.

Állítsa be az igazítást

A Flexbox beállításai két különböző módszert is adnak a tartalom igazításához: függőlegesen és vízszintesen. Íme a horizontális igazítási lehetőségek a flex tartályon belüli tételekhez:

flex-start : A sor kezdete felé (balra, kivéve, ha megfordította az elrendezést)

központ : A soron belüli elemek

flex-end : A sor vége felé tartozó elemek (jobb, hacsak nem fordították meg az elrendezést)

hely között : A sor mentén elosztott elemek

hely : Az egyenletesen elosztott elemek a sor mentén, egyenlő helyen az egyes elemek mindkét oldalán

Tehát a kód így néz:

 FLEX CONTAINER {
Kijelző: FLEX;
Flex irány: sor;
Align-tartalom: FLEX-START | Flex-end | Központ | Helyszín között | tér körül | nyúlvány;
}

Íme a Flex tartályban lévő elemek függőleges igazítási opciói:

flex-start : A sor tetejére igazított elemek

központ : Az elemek a soron belül vannak

flex-end : A sor aljához igazított elemek

nyúlvány : A sor magasságában nyújtott elemek

alapvonal : A bázisokhoz igazított elemek (a képzeletbeli vonal, amelyet a szöveg behelyezi)

A kód így nézhet ki:

 FLEX CONTAINER {
Kijelző: FLEX;
Flex irány: sor;
Align-tételek: Flex-Start | Flex-end | Központ | Alapvonal | nyúlvány;
}

Alapértelmezés szerint a Flex Container gyermekei mindig megpróbálnak illeszkedni egyetlen sorba. Ha meg szeretné változtatni, hozzáadhatja a betakar tulajdonság. Ez lehetővé teszi a gyerekek számára, hogy új sorba csomagolják, ha elfogynak a hely.

 FLEX CONTAINER {
Kijelző: FLEX;
Flex-Wrap: Wrap;
}

A Flex elemek is kapják saját flex alapú tulajdonságaikat. Ha egy elemet egy FLEX tartályba helyeznek, akkor automatikusan rugalmas gyermekré válik, és saját rugalmas CSS-stílusokat kap. Ezek a stílusok vezérlése, összehangolása és megjelenítési sorrendje.

Flex méretezés

A Flex Gyermekek megváltoztathatják szélességüket vagy magasságukat (a konténer elrendezésétől függően) a rendelkezésre álló hely kitöltéséhez.

A Webflow három előre beállított lehetőséget ad a flex méretezéshez: zsugorodik, ha szükséges, töltse ki az üres helyet, és ne zsugorodjon. Ne feledje, hogy minden gyermekelemnek megvan a saját beállításai, amely lehetővé teszi a tervezési lehetőségek számát.

 FLEX elem {
Flex-Shrink: & Lt; Number & Gt ;;
FLEX-GROW: & LT; NUMBER & GT;
Flex alap: & lt; hossza & gt; | Auto;
}

Vessünk egy pillantást arra, hogy mindezek a lehetőségek:

Szükség esetén zsugorodik: Méretét a szélessége / magassága vagy tartalma alapján méretezi. Az elem nem nő nagyobb, mint amennyire szüksége van, de csökkentheti a minimális méretét, hogy megakadályozza a túlcsordulás
Töltse ki az üres helyet: Lehetővé teszi az elem kibővítéséhez, hogy kitöltse az összes rendelkezésre álló helyet a szülő belsejében. Ha ezt a Flex tartályban lévő összes elemre állíthatja be, akkor kibővülnek, hogy egyenlő mennyiségű üres helyet foglalnak el
Ne zsugorodjon: Méretét a szélessége / magassága vagy tartalma alapján méretezi, de nem teszi lehetővé, hogy zsugorodjon, még akkor is, ha ez túlcsordul

A Flex elemek is rendelkezhetnek saját igazítási beállításokkal, amelyek felülbírálhatják az alapértelmezett beállítást szülői flex tartály. Ezek az igazítások korábban elmagyarázottak szerint viselkednek.

 FLEX elem {
Kijelző: FLEX;
Flex irány: sor;
Align-tételek: Flex-Start | Flex-end | Központ | Alapvonal | nyúlvány;
}

Alapértelmezés szerint a Flex elemek ugyanabban a sorrendben jelennek meg, mint a forráskódban. A Flexbox segítségével felülbírálhatja ezt a viselkedést, hogy az elemek pontosan megjelenjenek a kívánt sorrendben.

A négy fő opció itt használható:

Autó : Az alapértelmezett érték, amely a forrásban szereplő elemeket rendezi
Első : Az elem először a Flex tartályában jelenik meg
Utolsó : Az elem a Flex tartályába kerül
Egyedi : Testreszabhatja az elem megjelenítésének sorrendjét

Az egyéni megrendelés számként definiálható, amely meghatározza azt a sorrendet, amelyben a flex elem egy flex tartályban jelenik meg.

 FLEX elem {
Rendelés: & Lt; Integer & GT;
}

Miért kellene használni?

Örülök, hogy megkérdezted! A FLEXBOX segítségével lehetővé teszi, hogy könnyedén hozzon létre reagáló elrendezéseket, amelyek egyszer nagyon nehéz (vagy lehetetlen), hogy régebbi CSS elrendezési modulokkal hozzanak létre.

Vessen egy pillantást az alábbi kép példáira - amelyek közül sokan valószínűleg már az interneten keresztül láttad. Majdnem mindegyikük jelentős mennyiségű CSS-t (különösen a különböző képernyőméreteken) veszítené, de csak néhány egyszerű vonalat vegyen be a flexbox eléréséhez. Látni ezeket a példákat a cselekvésben, látogasson el flexbox.webflow.com .

A FLEXBOX hihetetlen ereje

Flexbox alapok

A FLEXBOX használatának módja

Elrendezési utasítások

Állítsa be az igazítást

Flex méretezés

Miért kellene használni?

kézikönyv - Most Popular Articles

Hogyan lehet Repost az Instagram-on

Hogyan készítsünk egy fotó kollázsot a Photoshop CC-ben

Hozzon létre egy WebGL 3D céloldalt

10 A felhasználóbarát webes formák előállítására vonatkozó szabályok

Hozzon létre egy csempe anyagot az anyagtervezőben

Hogyan készítsünk egyéni rig-vezérlőket Mayában

Hozzon létre egy festői érzést a digitális művészetben

Hogyan kell szobrot és pózol egy rajzfilmfejet Zbrush-ben

Kategóriák