A Flex használata a HTML-elemek igazításához

A CSS rugalmas tulajdonságai lehetővé teszik az elemek rugalmasabb és reagálóbb igazítását. Ez akkor hasznos, ha azt szeretné, hogy a HTML-elemek jobban reagáljanak a webböngészőben.

Ez a cikk bemutatja, hogyan használhat bizonyos rugalmas tulajdonságokat. Ez magában foglalja a flex-direction, justify-content, align-self, align-items, align-content és gap tulajdonságokat.

A CSS Flex Display beállítása

Egy példa szerkezet, amelyet felfedezhet a flexbox alapjai az egyszülős div alatti gyermek div. Az alábbi kódban van egy fő "szülő" div. A három gyermek div olyan elemeket jelöl, amelyeket a flex tulajdonságokkal igazíthat.

Ahhoz, hogy bármilyen rugalmas stílus működjön, hozzá kell adnia a kijelző: flex tulajdonság a szülő flex tárolóhoz.

.parent {
 kijelző: flex;
}

Flex nélkül az utód divek egymás után jelennek meg oszlopos alakzatban az oldalon.

A beállítás példájának megtekintéséhez tekintse meg és futtassa a kódot ebben CodePen részlet.

Az elrendezés irányának szabályozása

A flex-irány tulajdonság határozza meg a gyermekelemek sor- vagy oszlopirányát.

A flex-direction tulajdonság opciói a következők:

flex-irány: sor | oszlop | sor-fordított | oszlop-fordítás

Hozzá kell adnia egy szülőtárolót az igazítani kívánt elemek körül.

HTML:

CSS:

.red { háttérszín: piros; }
.narancs { háttérszín: narancs; }
.yellow { háttérszín: sárga; }
.green { háttérszín: zöld;}
.blue { háttérszín: kék; }
.purple { háttérszín: lila; }
.parent div {
 szélesség: 40 képpont;
 magasság: 40px;
}

Alkalmazza a flex-direction tulajdonságot a szülő flex tárolóra. Ez igazítja a gyermek div elemeket.

.parent {
 szélesség: 300 képpont;
 kijelző: flex; 
 flex-irány: sor;
}

Sok hajlítási tulajdonság utal a főtengely és a kereszttengely fogalmára. Amikor a flexi irány az sor, a főtengely a vízszintes irányt, a kereszttengely pedig a függőlegest jelöli. Az oszlop értéke váltja ezeket a tengelyeket.

Tekintse meg a flex-direction tulajdonság kódját ebben CodePen részlet néhány példát látni.

Az elemek igazítása a kereszttengely mentén

A align-ites tulajdonság szabályozza az elemek igazítását a kereszttengely mentén. Az alapértelmezett flex-iránynál a sor, az align-items az elemek függőleges igazítását szabályozza.

Az align-items tulajdonság beállításai a következők:

align-ites: flex-start | flex-end | align-ites | nyújtózkodni

Adja hozzá az align-items tulajdonságot a szülőtárolóhoz az alárendelt tárolóhoz.

.parent {
 kijelző: flex; 
 align-ites: flex-start;
}

Ezenkívül dönthet úgy, hogy az elemeket egy alapvonal használatával igazítja. Alapértelmezés szerint az alapvonal beállítás az összes elemet az elemek alapja alapján igazítja.

Azt is kiválaszthatja, hogy az alapvonal honnan induljon, például a tetejétől (első alapvonal) vagy alulról (utolsó alapvonal).

align-items: alapvonal | első alapvonal | utolsó alapvonal;

Elemek igazítása esetén: az alapvonal a működéshez, győződjön meg arról, hogy minden elemnek más a magassága vagy szélessége (a használt tengelytől függően).

​​​

Tekintse meg az align-items tulajdonság kódját ebben CodePen részlet néhány példát látni.

Az egyes tételek igazításának felülbírálása

Használhatja a igazod-ön tulajdonság felülírja a szülőtároló bármely igazítási elemstílusát. Ez azt jelenti, hogy külön flexibilis igazítást állíthat be az egyes tételeken.

Az align-self tulajdonság beállításai a következők:

align-self: auto | flex-start | flex-end | központ | alapvonal | nyújtózkodni

Tegyük fel például, hogy a szülőtároló rugalmas irányú stílusa "sor"-ra van állítva.

.parent {
 kijelző: flex; 
 flex-irány: sor;
}

Alkalmazhatja az align-self tulajdonságot az egyes tételekre. Az egyedi elem az align-self tulajdonság stílusát fogja használni, és az elemet a szülőtároló közepére helyezi.

Tekintse meg az align-self tulajdonság kódját ebben CodePen részlet néhány példát látni.

A vonalak elosztása a kereszttengelyen

A align-content tulajdonság a gyermekeket a függőleges tengely mentén igazítja. Meg tudja határozni a több sorban lévő elemek közötti távolságot is.

Az align-content tulajdonság beállításai a következők:

align-content: flex-start | flex-end | központ | nyúlik | térköz | tér-körül

Adja hozzá az align-content tulajdonságot a szülő rugalmas tárolóhoz. Az align-content tulajdonság csak akkor működik, ha a flex-wrap tulajdonság be van állítva. Flex-wrap: tördelése hozzáadása a szülőtárolóhoz, és csökkentse a szülő div szélességét, hogy az elemeket egynél több sorra kényszerítse.

.parent {
 flex-wrap: pakolás;
 kijelző: flex;
 align-content: flex-start;
 szélesség: 180 képpont;
}

Tekintse meg az align-content tulajdonság kódját ebben CodePen részlet néhány példát látni.

Az elemek igazítása a főtengelyen

A indokolja-tartalom tulajdonság jobbra, balra vagy középre igazítást ad az alárendelt elemekhez. A tartalom indokolásakor szóközzel is szétosztja az elemeket.

A justify-content tulajdonság opciói a következők:

indokolás-tartalom: flex-start | flex-end | központ | térköz | tér-körül | térben egyenletesen

Csomagolja be az igazítani kívánt elemeket egy szülő rugalmas tároló alá.

HTML:

CSS:

.red { háttérszín: piros; }
.green { háttérszín: világoszöld; }
.blue { háttérszín: kék; }

Adja hozzá az justify-content tulajdonságot a szülő rugalmas tárolóhoz.

.parent {
 szélesség: 300 képpont;
 kijelző: flex; 
 indokolja-tartalom: flex-start;
}

A justify-content tulajdonság a CSS Box Alignment specifikációjában felsorolt ​​értékeket is támogatja. Ide tartoznak az olyan értékek, mint a „kezdet”, „vége”, „balra” és „jobbra”. Egyes böngészők nem támogatják ezeket.

A justify-content tulajdonságnak van egy "safe" kulcsszava is, amelyet használhat. Ez biztosítja, hogy az elemek megpróbáljanak a szülőtároló tartományán belül maradni.

Az adatvesztés megelőzésére is szolgál abban az esetben, ha hosszú szót középre állít. A biztonságos kulcsszó használata megakadályozza, hogy egy rövidebb div levágja az első és az utolsó betűt.

.parent {
 kijelző: flex; 
 indokolja-tartalom: biztonságos központ;
}

A biztonságos kulcsszó bizonyos böngészőkre korlátozódik. A kompatibilitást itt ellenőrizheti Használhatom.

Tekintse meg az justify-content tulajdonság kódját ebben CodePen részlet néhány példát látni.

Hogyan adjunk szóközt az elemek között

A rés tulajdonság lehetővé teszi, hogy bizonyos mennyiségű helyet adjon az elemek között. Ez az egyik újabb CSS-funkciók, amelyek segítségével érzékeny elrendezést hozhat létre.

Alkalmazza a gap tulajdonságot a szülő flex tárolóra.

.parent {
 kijelző: flex;
 rés: 70 képpont;
}

Ha olyan hézagot ad hozzá, amely az elemek hosszát túllépi a szülő szélességét, akkor az elemek összezsugorodnak, hogy megpróbáljanak elférni a sorban.

.parent { 
 szélesség: 300 képpont;
 rés: 120 képpont;
}

Ha flex-wrap: wrap funkciót használ az elemek új sorba tolásához, a hézag mértéke a sorok közötti térre is vonatkozik.

.parent { 
 szélesség: 300 képpont;
 flex-wrap: pakolás;
 rés: 120 képpont;
}

Ezenkívül beállíthatja a sorköz és oszlop-rés tulajdonságait. Ismét alkalmaznia kell ezeket a szülő flex tárolóra.

A sorköz tulajdonság határozza meg az egyes sorok közötti távolságot. Az oszlopköz tulajdonság határozza meg az egyes oszlopok közötti távolságot.

.parent { 
 sorköz: 120 képpont; 
}
.parent { 
 oszlopköz: 120 képpont; 
}

Tekintse meg a gap tulajdonság kódját ebben CodePen részlet néhány példát látni.

További Flex-tulajdonságok használata webhelyén

Remélhetőleg most már ismeri a különféle rugalmas tulajdonságokat, amelyek segítségével az elemeket igazíthatja a weboldalán. Ez magában foglalja a flex-direction, justify-content, align-self, align-items, align-content és gap tulajdonságok használatát.

A Flexbox egy erőteljes elrendezési technika, de ez csak egy kis része a CSS-nek. Ezenkívül megismerheti az új CSS-tulajdonságokat, a tiszta kódolási technikákat és a CSS-optimalizáláshoz használt eszközöket.

11 hasznos eszköz a CSS-fájlok ellenőrzéséhez, tisztításához és optimalizálásához

Olvassa el a következőt

A szerzőről