Tīmekļa vietņu izstrādē elementu un tekstu centrēšana bieži vien ir būtiska prasība. Pirms Flexbox ieviešanas tas bija izaicinājums, kas prasīja daudz dažādu CSS paņēmienu, lai sasniegtu vēlamos rezultātus. Savukārt Flexbox piedāvā elastīgu un efektīvu veidu, kā konteinerā centrēt elementus gan horizontāli, gan vertikāli. Šajā rokasgrāmatā uzzināsiet, kā to izdarīt, izmantojot vienkāršu flexbox izkārtojumu.
Galvenie secinājumi
- Flexbox ir ideāli piemērots elementu centrēšanai.
- Izmantojot īpašības display: flex, align-items un justify-content, varat centrēt elementus gan horizontāli, gan vertikāli.
- Flex virzienu var iestatīt gan rindās (rinda), gan kolonnās (kolonna), kas ietekmē elementu izkārtojumu.
Soli pa solim
1. solis: Izveidojiet elastīgo konteineru
Vispirms ir nepieciešams elastīgs konteiners. Šis konteiners būs sākumpunkts jūsu fleksibloka izkārtojumam. HTML dokumentā pievienojiet div, kas darbosies kā konteiners. Šim nolūkam izmantojiet class="flex-container".
2. solis: definējiet konteinera īpašības
Kad esat izveidojis savu elastīgo konteineru, tam jāpievieno dažas CSS īpašības. Lai aktivizētu Flexbox, iestatiet īpašību display uz flex. Varat arī iestatīt īpašību flex-direction, lai noteiktu galveno asi bērnu izkārtojumam. Šajā piemērā mēs izmantojam rindu, kas nozīmē, ka elementi ir izkārtoti vienā rindā.
Solis Nr. 3: centrējiet elementus
Lai konteinerā centrētu atvasinātos elementus gan horizontāli, gan vertikāli, ir jāizmanto īpašības align-items un justify-content. Lai nodrošinātu vertikālu centrēšanu, iestatiet align-items uz centre, bet, lai nodrošinātu horizontālu centrēšanu, iestatiet justify-content arī uz centre.
4. solis: pārbaudiet rezultātu
Tagad jums vajadzētu redzēt rezultātu. Visiem elastīgā konteinera pakārtotajiem elementiem jābūt centrētiem gan horizontāli, gan vertikāli. Tas ir īpaši ērti, ja vēlaties vienmērīgi izvietot tekstu vai citu saturu konteinerā.
Solis Nr. 5: Centrēšanas variācijas
Ja maināt izlīdzināt-items vai attaisnot-kontu īpašības, varat ietekmēt elementu centrēšanu. Piemēram, align-items: flex-start vertikālo centrēšanu pārvietos uz konteinera augšu. Eksperimentējiet ar šīm vērtībām, lai saprastu, kā darbojas Flexbox.
Solis 6: Pievienojiet vairākus elementus
Ja konteinerā ir vairāki elementi, pamanīsiet, ka arī tie tiks centrēti, ja vien izmantosiet iepriekš minētās flex īpašības. Varat pievienot vairākus divslāņus ar kastes klasi, un tie visi būs viegli centrēti.
7. solis: Pielāgojiet flex virzienu
Interesanta Flexbox īpašība ir flex virziens. Varat izmantot flex-direction: column, lai tagad izkārtotu elementus kolonnā, nevis rindā. Rezultātam vajadzētu parādīt, ka izlīdzināšana joprojām darbojas, neraugoties uz elastīgā virziena maiņu.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot flexbox, lai centrētu elementus CSS. Izmantojot pamatīpašības display: flex, align-items un justify-content, jūs esat atklājuši spēcīgu veidu, kā eleganti un viegli centrēt saturu ekrānā.
Biežāk uzdotie jautājumi
Kā ar flexbox palīdzību centrēt vienu elementu?izmantojiet flex konteineru, iestatiet display: flex, align-items: centre un justify-content: centre.
Vai es varu mainīt flex virzienu?Jā, jūs varat pielāgot flex virzienu, izmantojot flex-direction: row vai flex-direction: column.
Kas notiek, ja pievienoju vairāk nekā vienu pakārtoto elementu?Visi pakārtotie elementi paliek centrēti konteinerā, ja vien netiek mainītas elastīgās kastes īpašības.
