Ez a cikk bemutatja a szöveg függőleges igazítását a flexboxon belül:
1. módszer: Az „igazítási elem” tulajdonság használata
A szöveg függőleges igazításához a felhasználók használhatják a „ align-elem ” tulajdonát a CSS biztosítja. Segít az elemeknek a flexboxon belüli igazításában. A lehetséges függőleges igazítási pozíciók a „ tetejére ”, középső ”, vagy „ alsó ” oldalon.
Az alábbiakban bemutatjuk az elemek ezen irányokba igazításának gyakorlati bemutatóit:
1. példa: Felső pozíció
A felső pozícióban lévő flexboxon belüli szöveg igazításához a „ flex-start ' érték a ' align-ites ' ingatlan. Ez a tulajdonság a fő divhez van hozzárendelve, amely flexként jelenik meg. Tegyük fel, hogy a div osztálya ' függőleges ” jön létre a HTML-fájlban. Ezután a CSS-fájlban válassza ki az osztályt, és rendelje hozzá a következő tulajdonságokat:
.függőleges {
szín : fehér ;
magasság : 150 képpont ;
kijelző : Flex ;
padding-bal : 20 képpont ;
align-ites : flex-start ;
háttérszín : erdő zöld ;
}
- Először is, alapvető stílust és igazítást kap a div a CSS színe, háttérszíne és magassága alapján.
- A „display” tulajdonság szintén „flex”-re van állítva, hogy flexbox legyen.
- Végül a szöveg megjelenítéséhez a flexbox elején állítsa az „align-items” tulajdonságot „flex-start” értékre.
A fenti kód végrehajtása után a weboldal így néz ki:
A kimenet azt mutatja, hogy a szöveg most a flexboxon belüli felső pozícióhoz igazodik.
2. példa: Középső pozíció
A szöveg középső pozícióba történő függőleges igazításához állítsa be a „ központ 'érték a CSS-hez' align-ites ' ingatlan:
.függőleges {szín : fehér ;
magasság : 150 képpont ;
kijelző : Flex ;
padding-bal : 20 képpont ;
align-ites : központ ;
háttérszín : erdő zöld ;
}
A fenti kód végrehajtása után:
A fenti kimenet azt mutatja, hogy a szöveg most a flexbox közepén van igazítva.
3. példa: Alsó pozíció
A flexbox alján lévő szöveg beállításához rendelje hozzá a „ hajlékony végű ' érték a ' align-ites ' ingatlan. Ezúttal a szöveg arra a helyre igazodik, ahol a flexbox véget ér, azt jelenti, hogy az alsó oldalon:
.függőleges {szín : fehér ;
magasság : 150 képpont ;
kijelző : Flex ;
padding-bal : 20 képpont ;
align-ites : hajlékony végű ;
háttérszín : erdő zöld ;
}
A fenti kód végrehajtása után a weboldal így néz ki:
A fenti kimenet azt mutatja, hogy a szöveg most függőlegesen igazodik az alsó pozícióba.
2. módszer: „justify-content” tulajdonság használata
A ' indokolja-tartalom ” tulajdonság a flexboxon belüli szöveg függőleges igazítására is használható. Ez azonban ugyanúgy működik, mint a ' szöveg igazítás ” tulajdonságot, és sorirányban igazítja az elemeket. Tehát az igazítás irányának megváltoztatásához a „ flex-irány ' tulajdonságot használják a ' indokolja-tartalom 'igazítás' felé oszlop ” irány:
.függőleges {magasság : 150 képpont ;
kijelző : Flex ;
padding-bal : 20 képpont ;
szín : fehér ;
háttérszín : sötétcián ;
flex-irány : oszlop ;
indokolja-tartalom : hajlékony végű ;
}
A fenti kód magyarázata az alábbiakban található:
- A ' magasság ”, „ szín ” és „ padding-bal ” tulajdonságok ugyanúgy működnek, mint a fenti módszer.
- Ezt követően állítsa be a „ oszlop ' érték a ' flex-irány ”-ból a flexbox stílusok oszlopokon keresztül történő alkalmazásához.
- Ezt követően a „ indokolja-tartalom ” tulajdonság függőlegesen igazítja a szöveget.
- Végül a „ hajlékony végű ' érték igazítja az elemet a ' alsó ” oldalon.
jegyzet : A felhasználók beállíthatják a „ flex-start ” és „ központ ' értékeket a ' tetejére ”, és „ középső ” oldalain, ill.
Például a fenti kód végrehajtása után a weboldal így néz ki:
A fenti kimenet azt mutatja, hogy a szöveg a flexbox alján van igazítva.
Következtetés
A szöveg flexboxon belüli függőleges igazításához a „ align-ites ” és „ indokolja-tartalom ” CSS tulajdonságok használhatók. Mindkét tulajdonság megkapja flex-start ”, „ központ ” vagy „ hajlékony végű ' értékekkel igazítja a szöveget a ' tetejére ”, „ középső ” és „ alsó ” utasításokat a flexbox belsejében, ill. Ez a cikk bemutatta a szöveg függőleges igazítását flexboxban.