Flexbox a CSS-ben: Az első lépések a weboldal strukturálása felé

Ebben a bemutatóban megtanulhatod, hogyan építhetsz egy minta struktúrát a webes projektjeidhez a Flexbox elrendezés segítségével CSS-ben és HTML-ben. Megnézzük a Visual Studio Code beépített hibakeresési eszközeit a Microsoft Edge-del együtt, és megtesszük az első lépéseket a Flexbox elrendezés aktiválásához. A Flexbox egy nagy teljesítményű elrendezési rendszer, amelynek segítségével kis erőfeszítéssel és az elemek rugalmas elrendezésével komplex elrendezéseket hozhat létre.

A legfontosabb megállapítások

• A Flexbox lehetővé teszi az elemek vízszintes és függőleges elrendezését.
• A Microsoft Edge fejlesztői eszközei közvetlenül a Visual Studio Code-ba integrálhatók.
• A Flex-Direction befolyásolja a Flex-elemek igazítását.

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

Először telepítse a Microsoft Edge eszközöket a Visual Studio Code-ban. Keresse meg a "Microsoft Edge Tools for VS Code" keresőt a bővítmények között, és telepítse.

A bővítmény telepítése után el kell mennie a hibakeresési beállításokhoz. Kattintson a "Futtatás és hibakeresés", majd a "launch.json fájl létrehozása" lehetőségre. Ez segít a beállítások konfigurálásában.

Az így létrehozott konfigurációs fájlban adjon hozzá egy új konfigurációt a "Microsoft Edge Tools" számára. Győződjön meg róla, hogy a localhost:3000 címet adja meg helyi címként, mivel a kiszolgálót ezen a porton futtatjuk a terminálunkban.

Most itt az ideje, hogy elindítsuk a projektet. Váltsunk a megfelelő alkönyvtárba, és hajtsuk végre az npm run dev parancsot. Ezután nyissa meg a böngészőben a localhost:3000 címet.

Miután betöltöttük az oldalt, a Visual Studio Code-ban a megfelelő gombra kattintva aktiválhatjuk a Microsoft Edge fejlesztői eszközeit. Ez megnyitja a fejlesztői eszközt közvetlenül a szerkesztője mellett.

Most már láthatja az alkalmazás szerkezetét. Van egy "Flex Container" osztályú konténerünk (div). Ezen a konténeren belül négy DIV elem található, amelyek "Flex Child" osztályúak, és az 1, 2, 3 és 4 szöveges tartalmat jelenítik meg.

A flex konténer jelenleg csak 400 pixel szélességgel és 200 pixel magassággal van definiálva, míg a flex gyermekelemek 100 pixel szélességgel és 50 pixel magassággal vannak definiálva. Bár jelenleg egyik gyermek sem van Flexbox-szal elrendezve, azok egy függőleges listában jelennek meg.

A Flexbox aktív használatához hozzá kell adni és el kell menteni a display: flex; CSS-attribútumot a Flex konténerhez. Ha ezt megteszi, látni fogja, hogy a gyerekek elrendezése automatikusan megváltozik, és mostantól egymás mellett jelennek meg.

Ha a flex gyermekeket ismét függőlegesen szeretné elrendezni, használhatja a flex-direction tulajdonságot. Állítsa be a flex-tartály flex-direction: column; értékét, hogy a flex-gyerekek tájolása ismét függőlegesre változzon.

Észre fogja venni, hogy a flex-gyerekek most ismét függőlegesen vannak elrendezve. Ha most beállítja a magasságot és a szélességet, akkor úgy néz ki, mintha egy blokkba lennének integrálva, még akkor is, ha a megjelenítés nem Block, hanem Flex értékre van állítva.

Ez már egy áttekintés volt a Flexbox elrendezés alapjairól. A videóban a legfontosabb tulajdonságokat beszéltük meg, és láttuk a hatásaikat. A következő oktatóanyagokban a Flexbox további tulajdonságait fogjuk felfedezni, és megnézzük, mit lehet kezdeni ezzel az erőteljes elrendezési rendszerrel.

Összefoglaló

Ebben az oktatóanyagban megtanultad, hogyan építhetsz egy egyszerű struktúrát a Flexbox segítségével CSS-ben. Integrálta a Microsoft Edge fejlesztői eszközeit a Visual Studio Code-ba, és megtette az első lépéseket a Flex elrendezés aktiválásához. Még sok lehetőség áll előtted, amelyeket a következő videókban részletesebben is megnézünk.