CSS oktatóanyag: Flexbox a CSS-ben.

Reszponzív tervek létrehozása a CSS Flexbox segítségével

A CSS Flexbox segítségével a fejlesztők gyorsan hozhatnak létre bonyolult és dinamikus elrendezéseket anélkül, hogy lebegtetésekre vagy más elrendezési megoldásokra kellene hagyatkozniuk. A Flexbox az alkalmazkodó webdizájn kulcsfontosságú technikája, mivel lehetővé teszi a fejlesztők számára, hogy egy tárolóban igazítsák, helyezzék el és osztják el az elemeket. Ebben a bejegyzésben megvizsgáljuk a CSS Flexbox alapvető elemeit, beleértve az alapvető attribútumokat, valamint azt, hogy hogyan hatnak egymásra a rugalmas elrendezések létrehozása érdekében.

Mi az a Flexbox?

A Flexbox, egy CSS-elrendezési stílus, hatékonyabb megközelítést kínál a tárolóban lévő dolgok elrendezésére, igazítására és felosztására. Jelenleg minden kortárs böngésző támogatja; először a CSS3-ban vezették be. A Flexbox modell működéséhez egy tárolót rugalmas sorokra vagy oszlopokra kell felosztani, hogy az elemeket el lehessen osztani és el lehessen igazítani bennük.

A Flexbox népszerű elrendezési lehetőség a kortárs webdizájnban, mert lehetővé teszi a reszponzív kialakításokat, amelyek azonnal alkalmazkodnak a különböző képernyőméretekhez és -felbontásokhoz.

A Flexbox tulajdonságai

A főtengely és a kereszttengely az a két tengely, amelyet a Flexbox használ a konténer felosztására. Az alaptengely, amely mentén a hajlékony objektumokat elhelyezik, főtengelynek nevezik. Ez lehet függőleges (egy oszlop) vagy vízszintes (egy sor). A főtengellyel párhuzamos tengelyt kereszttengelynek nevezzük. Az objektumok függőleges vagy vízszintes igazítására szolgál, és a főtengelyre merőlegesen fut. A Flexbox attribútumok segítségével módosítható a rugalmas tárolóban található egyes rugalmas elemek mérete és elhelyezkedése.

Flex tartály tulajdonságai

Használja a megjelenítési tulajdonságot flex vagy inline-flex értékkel, hogy egy elemet rugalmas tárolóvá alakítson. A rugalmas tárolókra alkalmazható további jelentős attribútumok a következők:

1. 'flex-direction': A főtengely irányát a flex-direction attribútum határozza meg. Sor, sorfordítás, oszlop vagy oszlopfordítás a lehetséges beállítások. Kezdetben sorozásra van beállítva.
2. „justify-content” : Az justify-content tulajdonsággal a rugalmas elemek az elsődleges tengelyen vannak középre állítva. Flex-start, flex-end, center, space-bensing, space-round, vagy space-egyenletes választás.
3. „Elemek igazítása” : A flexibilis elemek a kereszttengely mentén igazodnak az align-items attribútummal. Konfigurálható nyújtásra, alapvonalra, középre vagy rugalmas indításra.
4. „flex-wrap” : Ha a rugalmas elemek túlcsordulnak a tárolón, a flex-wrap tulajdonság határozza meg, hogy csomagolni kell-e őket. Be lehet állítani úgy, hogy becsomagoljon, burkoljon-fordítson vagy burkoljon. Alapértelmezés szerint burkolásra van beállítva.
5. „align-content” : Ha további hely van a tárolóban, az align-content tulajdonság a hajlékony vonalakat (sorokat vagy oszlopokat) a kereszttengely mentén igazítja. Konfigurálható úgy, hogy nyújtson, terítsen között, térközt körül, középre vagy rugalmasan indítson.

.container{
            display: flex;
            margin: 2px;
            border: 2px solid black;
            padding: 26px;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
}

Flex elem tulajdonságai

A flexibilis konténer gyermekalkatrészei rugalmas elemek. A következő fontos attribútumok alkalmazhatók a rugalmas elemekre:

1. ‘order’ : A flex elemek sorrendjét a tárolón belül az order attribútum határozza meg. Ez egy szám, amelynek alapértelmezett értéke 0.
2. „flex-grow” : Egy rugalmas cikk növekedési képességét a tárolóban lévő többi rugalmas elemhez képest a flex-grow attribútum határozza meg. Ez egy szám, amelynek alapértelmezett értéke 0.
3. „flex-shrink” : Egy flexibilis cikk zsugorodási képességét a tárolóban lévő többi rugalmas elemhez képest a flex-shrink attribútum határozza meg. Ez egy numerikus szám, amelynek alapértelmezett értéke 1.
4. 'flex-basis' : Mielőtt bármilyen flex-grow vagy flex-shrink módosítást végrehajtanánk, a flex elem kezdő méretét a flex-basis tulajdonság határozza meg. Beállítható százalékra vagy fix számra. Kezdetben automatikusra van állítva.
5. „flex”: A rugalmas növekedés, a flexibilis zsugorodás és a flex-alap mind a flex gyorsírási tulajdonság összetevői. Mindhárom attribútum egyidejű beállítására szolgál.
6. „align-self” : A flex elem felülírhatja az align-items tulajdonságot a rugalmas tárolón az align-self tulajdonság használatával. Beállítható nyújtásra, középre, alapvonalra, rugalmas indításra vagy automatikusra. Kezdetben automatikusra van állítva.

 .item {
   order: 0; /* Default */
   order: 1;
   flex-grow: 1;
   flex-shrink: 2;
   flex-basis: 100px;
   /* flex: 1 0 auto; */
   align-self: center;
 }

Következtetés

A rugalmas és dinamikus elrendezések tervezésének erős eszköze a CSS Flexbox. A fejlesztők olyan adaptív terveket készíthetnek, amelyek automatikusan alkalmazkodnak a különböző képernyőméretekhez és -felbontásokhoz, mivel az elemek milyen könnyen oszlanak el egy tárolóban, és milyen könnyen igazíthatók az elemek egy tárolón belül.

A Flexbox minden kortárs webdesign eszköztár kulcsfontosságú eleme, mivel lehetővé teszi a fejlesztők számára, hogy az alapvető ötletek és jellemzők ismeretében egyszerűen készítsenek összetett elrendezéseket.

Meg kell jegyezni, hogy a Flexbox nem mindig az ideális megoldás minden elrendezési problémára. A CSS Grid előnyös lehetőség lehet bonyolultabb elrendezéseknél, vagy amikor az elemeket a szülőtárolójukon kívül kell elhelyezni.

A CSS Flexbox azonban minden webfejlesztő eszköztárában kötelező eszköz az egyszerű és intuitív elrendezési lehetőségei miatt. A fejlesztők gyönyörű, reszponzív terveket készíthetnek, amelyek számos eszközön és képernyőméreten működnek, ha integrálják azokat más CSS-módszerekkel és -keretrendszerekkel, például a médialekérdezésekkel és a Bootstrappel.

Ha nem ismeri a Flexboxot, javasoljuk, hogy játsszon vele projektjei során, hogy megértse, hogyan működik. Az elérhető ötleteket és módszereket a számos elérhető internetes forrás és oktatóanyag segítségével is elsajátíthatja.

Végül a CSS Flexbox egy erős és alkalmazkodó funkció, amely lehetővé teszi a dinamikus és reszponzív elrendezések korábbinál egyszerűbb fejlesztését. A Flexbox minden kortárs webdesign eszköztár kulcsfontosságú eleme, mivel lehetővé teszi a fejlesztők számára, hogy az alapvető ötletek és jellemzők ismeretében egyszerűen készítsenek összetett elrendezéseket.

Ajánlott könyvek