Veebiarenduses on elementide ja tekstide keskmine asetamine sageli oluline nõue. Enne Flexboxi tutvustust oli see väljakutse, mis nõudis erinevaid CSS-tehnikaid soovitud tulemuste saavutamiseks. Flexbox pakub paindlikku ja tõhusat viisi elementide nii horisontaalselt kui ka vertikaalselt konteineris keskendamiseks. Selles juhendis saate teada, kuidas seda teha lihtsa Flexboxi paigutuse abil.
Olulisemad teadmised
- Flexbox on ideaalne elementide keskendumiseks.
- Display: flex, align-items ja justify-content omaduste abil saate elemente nii horisontaalselt kui ka vertikaalselt keskenduda.
- Flexi suund saab määrata nii ridade (row) kui ka veergude (column) jaoks, mis mõjutab elementide paigutust.
Samm-sammult juhend
Samm 1: Looge Flex-konteiner
Alustuseks vajate Flex-konteinerit. See konteiner on teie Flexboxi paigutuse alguspunkt. HTML-dokumendis lisage div, mis toimib konteinerina. Selleks kasutage class="flex-container".
Samm 2: Määrake konteineri omadused
Kui olete loonud oma Flex-konteineri, lisage sellele mõned CSS-omadused. Määrake display-omadus väärtusele flex, et aktiveerida Flexbox. Samuti saate määrata flex-suuna, et määrata laste paigutamiseks peamine telg. Selles näites kasutame rida, mis tähendab, et elemendid paigutatakse reale.
Samm 3: Elementide keskmine asetamine
Elementide horisontaalse ja vertikaalse keskendamiseks konteineris kasutage align-items ja justify-content omadusi. Määrake align-items väärtuseks center, et saavutada vertikaalne keskmine asetus, ning kasutage justify-content samuti center, et tagada horisontaalne keskendumine.
Samm 4: Kontrollige tulemust
Nüüd peaksite suutma tulemust näha. Kõik Flex-konteineri lasteelemendid peaksid olema nii horisontaalselt kui ka vertikaalselt keskendatud. See on eriti kasulik, kui soovite teksti või muid sisu ühtlaselt konteinerisse paigutada.
Samm 5: Keskmise asetuse variatsioonid
Kui muudate align-items või justify-content omadusi, saate mõjutada elementide joondust. Näiteks align-items: flex-start puhul nihkub vertikaalne keskendamine konteineri ülemisele servale. Katsetage nende väärtustega, et saada aimu Flexboxi toimimisest.
Samm 6: Mitme elemendi lisamine
Kui teil on konteineris mitu elementi, märkate, et need keskenduvad samuti, kui kasutate eespool mainitud Flex-omadusi. Saate lisada mitu divi klassiga "box" ja kõik peaksid olema kergelt keskendatud.
Samm 7: Kohandage Flex-suunda
Üks huvitav omadus Flexboxis on Flex-suund. Saate kasutada flex-direction: column, et paigutada elemendid nüüd veerus rea asemel. Tulemus peaks näitama, et joondamine toimib endiselt hoolimata Flex-suuna muutusest.
Kokkuvõte
Selles juhendis õppisite, kuidas kasutada Flexboxi elementide keskendamiseks CSS-is. Display: flex, align-items ja justify-content põhiomaduste abil avastasite võimsa meetodi sisu elegantselt ja lihtsalt ekraanil paigutamiseks.
Korduma kippuvad küsimused
Kuidas saan Flexboxiga keskendada ühte elementi?Kasutage Flex-konteinerit, määrake display: flex, align-items: center ja justify-content: center.
Kas ma saan muuta Flex-suunda?Jah, saate Flex-suunda kohandada flex-direction: row või flex-direction: column abil.
Mis juhtub, kui lisate rohkem kui ühe lapselemendi?Kõik lapseelemendid jäävad endiselt konteinerisse keskmiseks, kuni Flexboxi omadusi pole muudetud.
