Flexbox CSS-ben és HTML-ben: Egy konkrét példa a reszponzív tervezésre

Ebben a bemutatóban megmutatom, hogyan használhatod a Flexboxot CSS-ben és HTML-ben egy reszponzív elrendezés létrehozásához két oldalsávval és egy fő területtel. A Flexbox lehetővé teszi az elemek rugalmas elrendezését, hogy azok dinamikusan alkalmazkodjanak a képernyő méretéhez. Akár csak egy egyszerű webhelyet, akár egy összetett dizájnt szeretne létrehozni, a flexbox technológia számos lehetőséget kínál. Kezdjük egy konkrét példával!

A legfontosabb megállapítások

• A flexbox lehetővé teszi, hogy olyan reszponzív elrendezést hozzon létre, amelyben a különböző elemek egyenletesen oszlanak el a rendelkezésre álló szélességen.
• A flex tulajdonságok határozzák meg, hogy az egyes elemek mekkora helyet foglalnak el a többi elemhez képest.

Lépésről lépésre történő útmutatás

1. lépés: Az alapstruktúra beállítása

A Flexbox-szal való munkához először is szükség van egy alapvető HTML-keretrendszerre. Hozzon létre egy HTML-fájlt, és adja hozzá az alapvető címkéket, például a , , és . Ezután adja hozzá az oldalsávok és a fő tartalom konténerelemeit a taghez.

2. lépés: CSS hozzáadása az elrendezés kialakításához

Most CSS segítségével szeretne némi stílust hozzáadni az elrendezéshez.

3. lépés: A Flexbox aktiválása

A Flexbox aktiválásához alkalmazza a display: flex; tulajdonságot a konténerre. Ezáltal a konténer közvetlen gyermekei flex elemmé válnak. Valószínűleg az irányt is be szeretné állítani: Vízszintes elrendezéshez használja a flex-direction: row; értéket.

4. lépés: A flex tulajdonságok beállítása a gyermekelemekhez

Ezután állítsa be a flex tulajdonságokat a gyermekelemek számára. Itt határozhatja meg, hogy az egyes elemek mekkora helyet kapjanak a többi elemhez képest. Például a főelem flex: 2; és a két oldalsávos elem flex: 1; értéket adhat meg, hogy a főelem kétszer annyi helyet foglaljon el, mint az oldalsávos elemek.

5. lépés: A reszponzív szélesség beállítása

Annak érdekében, hogy az elrendezés is reszponzív legyen, a konténert width: 100%; értékre kell állítani. Ez az elrendezést a böngészőablak szélességéhez igazítja. Válassza ki a magasságot is, hogy az elrendezés nézetei optimalizálhatók legyenek.

6. lépés: Fix szélesség meghatározása az oldalsávokhoz

Ha fix szélességű oldalsávot szeretne definiálni, akkor a Flex elrendezéshez hozzáadhatja az oldalsáv fix szélességét. Egyszerűen távolítsa el a flex tulajdonságot az oldalsávról, hogy az csak a minimális szélesség legyen.

7. lépés: További beállítások és tesztek

Most érdemes ellenőrizni az elrendezést a böngészőben, hogy minden rendben legyen. Kísérletezzen a különböző flex értékekkel és szélességekkel, hogy lássa, hogyan reagál az elrendezés. Méretezze a böngészőablakot, hogy tesztelje a design reszponzív tulajdonságait.

8. lépés: Függőleges elrendezés végrehajtása

Opcionálisan függőleges elrendezést is létrehozhat. Ehhez változtassa a flex-tartályt oszlopra a flex-direction: column; használatával. Erre a lépésre akkor van szükség, ha több tervezési lehetőséget szeretne.

9. lépés: A böngészők támogatásának hozzáadása

Munka közben ne felejtse el ellenőrizni a böngészők támogatását. A böngészők egyes régebbi verziói előtagokat igényelnek a Flexboxhoz. Ha szükséges, adja hozzá a megfelelő előtagokat, hogy az elrendezés mindenhol jól nézzen ki.

10. lépés: Végső beállítások és mentés

Ellenőrizze az összes vezérlőelemet, és győződjön meg róla, hogy az elrendezés jól néz ki a különböző képernyőméreteken. Mentse el az összes módosítást, és készítsen képernyőfotókat az elrendezésről, hogy áttekintést kapjon a haladásról.

Összefoglaló

Ebben az útmutatóban megtanulta, hogyan hozhat létre egyszerű, reszponzív elrendezést Flexbox segítségével. A Flex tulajdonságok segítségével könnyedén szabályozhatja az elemek méretét és elrendezését. A fent leírt lépésekkel olyan elrendezést tervezhet két oldalsávval és egy fő területtel, amely elegánsan alkalmazkodik a különböző képernyőméretekhez.