Kuriant žiniatinklio svetaines dažnai būtina centruoti elementus ir tekstus. Iki " Flexbox" įdiegimo tai buvo iššūkis, kuriam išspręsti reikėjo daugybės skirtingų CSS metodų, kad būtų pasiektas norimas rezultatas. Kita vertus, "Flexbox" siūlo lankstų ir veiksmingą būdą centruoti elementus tiek horizontaliai, tiek vertikaliai konteineryje. Šiame vadove sužinosite, kaip tai padaryti su paprastu "Flexbox" išdėstymu.
Pagrindinės išvados
- Flexbox idealiai tinka elementams centruoti.
- Naudodami savybes display: flex, align-items ir justify-content galite centruoti elementus tiek horizontaliai, tiek vertikaliai.
- Flex kryptį galima nustatyti ir eilutėse (row), ir stulpeliuose (column), o tai turi įtakos elementų išdėstymui.
Žingsnis po žingsnio
1 veiksmas: sukurkite lankstųjį konteinerį
Pirmiausia reikia sukurti lankstųjį konteinerį. Šis konteineris bus pradinis jūsų flexbox išdėstymo taškas. HTML dokumente pridėkite div, kuris veiks kaip konteineris. Tam naudokite class="flex-container".
2 veiksmas: apibrėžkite konteinerio savybes
Sukūrę flex konteinerį, turite pridėti jam keletą CSS savybių. Nustatykite savybę display į flex, kad suaktyvintumėte Flexbox. Taip pat galite nustatyti flex-direction, kad nustatytumėte pagrindinę vaikų išdėstymo ašį. Šiame pavyzdyje naudojame eilutę, o tai reiškia, kad elementai išdėstyti vienoje eilutėje.
3 veiksmas: centruokite elementus
Norėdami centruoti antrininkus konteineryje tiek horizontaliai, tiek vertikaliai, turite naudoti savybes align-items ir justify-content. Nustatykite align-items reikšmę centre, kad užtikrintumėte vertikalų centravimą, o justify-content reikšmę centre, kad užtikrintumėte horizontalų centravimą.
4 veiksmas: patikrinkite rezultatą
Dabar turėtumėte matyti rezultatą. Visi "flex" konteinerio antriniai elementai turėtų būti centruoti ir horizontaliai, ir vertikaliai. Tai ypač patogu, jei norite tolygiai išdėstyti tekstą ar kitą turinį konteineryje.
5 veiksmas: centravimo variantai
Jei pakeisite savybes align-items arba justify-content, galėsite daryti įtaką elementų centravimui. Pavyzdžiui, dėl align-items: flex-start vertikalus centravimas bus perkeltas į konteinerio viršų. Eksperimentuokite su šiomis reikšmėmis, kad pajustumėte, kaip veikia "Flexbox".
6 veiksmas: pridėkite kelis elementus
Jei konteineryje yra keli elementai, pastebėsite, kad jie taip pat bus išcentruoti, jei naudosite pirmiau minėtas flex savybes. Galite pridėti kelis divus su dėžutės klase ir jie visi turėtų būti lengvai centruojami.
7 veiksmas: Pritaikykite flex kryptį
Įdomi Flexbox savybė yra flex kryptis. Galite naudoti flex-direction: column, kad dabar elementus išdėstytumėte ne eilutėje, o stulpelyje. Rezultatas turėtų rodyti, kad, nepaisant pakeistos flex krypties, lygiavimas vis dar veikia.
Apibendrinimas
Šiame vadove sužinojote, kaip naudoti flexbox elementams centruoti CSS. Naudodami pagrindines savybes display: flex, align-items ir justify-content, atradote galingą būdą elegantiškai ir lengvai centruoti turinį ekrane.
Dažniausiai užduodami klausimai
Kaip centruoti vieną elementą naudojant flexbox?naudokite flex konteinerį, nustatykite display: flex, align-items: centre ir justify-content: centre.
Ar galiu pakeisti flex kryptį?Taip, flex kryptį galite reguliuoti naudodami flex-direction: row arba flex-direction: column.
Kas atsitiks, jei pridėsiu daugiau nei vieną antrinį elementą?Visi antriniai elementai išlieka centruoti konteineryje, jei nekeičiamos flexbox savybės.
