Šiame vadove sužinosite, kaip naudoti "Flexbox", kad išlygintumėte lanksčiojo konteinerio elementus pagal pagrindinę ašį. Jau aptarėme lygiavimą pagal skersinę ašį, tačiau pagrindinė ašis taip pat svarbi. Flexbox technologija siūlo keletą būdų, kaip lanksčiai ir pritaikomai sulygiuoti elementus. Pažvelkime atidžiau!
Pagrindinės išvados
- Lygiavimas pagal pagrindinę ašį atliekamas naudojant savybę justify-content.
- Galite naudoti įvairias reikšmes, pavyzdžiui, centre, flex-start, flex-end, space-between ir space-around, kad pritaikytumėte savo išdėstymą.
- Flexbox nuostatos turi tiesioginį poveikį elementų išdėstymui norima kryptimi.
Žingsnis po žingsnio
1. inicializuokite flex konteinerį
Pradėkite nuo flex konteinerio sukūrimo ir jo flex krypties nustatymo. Šiame pavyzdyje nustatome flex kryptį į eilutę. Tai reiškia, kad elementai bus išdėstyti eilute iš kairės į dešinę.
2. numatytoji elementų lygiuotė
Jei elementus į konteinerį patalpinsite be jokių specialių stiliaus koregavimų, pamatysite, kad pagal numatytuosius nustatymus jie bus išlyginti konteinerio viršuje. Norėdami tai įsivaizduoti, galite suteikti jiems 100 pikselių plotį.
3. centruotas išlyginimas
Norėdami elementus centruoti, naudokite CSS savybę justify-content su reikšme centre. Taip elementai išlyginami konteinerio centre, todėl gaunamas labai patrauklus išdėstymas.
4. elementų išlyginimas pabaigoje
Jei norite elementus sulygiuoti konteinerio gale, galite naudoti savybės justify-content reikšmę flex-end. Taip elementai perkeliami į dešinįjį konteinerio galą.
5. sulygiuoti elementus paleidimo metu
Numatytoji elgsena be pritaikymo yra flex-start, o tai reiškia, kad elementai lieka konteinerio pradžioje. Šis nustatymas naudingas, jei norite aiškiai ir tvarkingai išdėstyti elementus konteinerio viršuje.
6. pakeisti flex kryptį
Jei flex kryptį pakeisite į stulpelį, pagrindinė ašis iš horizontalios pasikeis į vertikalią. Tai reiškia, kad elementai dabar išdėstomi iš viršaus į apačią.
7. centruokite elementus vertikaliai
Taip pat galite centruoti elementus šiame naujame išlyginime naudodami justify-content: centre. Šis nustatymas užtikrina, kad visi elementai būtų rodomi konteinerio centre.
8. išlyginimas apačioje
Jei norite, kad elementai būtų konteinerio apačioje, vėl galite nustatyti išlenkimo pabaigą. Taip elementai išdėstomi konteinerio apačioje.
9. erdvės savybių naudojimas
Flexbox taip pat leidžia valdyti tarpą tarp elementų naudojant savybes space-between, space-around ir space-evenly. Šios savybės skirtingai paskirsto turimą erdvę.
10. naudoti erdvę-between
Naudojant justify-content: space-between, pirmasis elementas lieka konteinerio viršuje, o paskutinis - apačioje, o erdvė tarp elementų paskirstoma tolygiai.
11. išbandykite erdvę aplink
Jei naudojate space-around, aplink kiekvieną elementą sukuriamas vienodas tarpas. Ši erdvė matoma konteinerio centre, o elementai išlieka tolygiai paskirstyti.
12. naudokite space-evenly
Naudojant space-evenly užtikrinama, kad visur tarp elementų ir konteinerio krašto būtų vienoda erdvė.
Apibendrinimas
Šiame vadove sužinojote, kaip nustatyti išlyginimą pagrindinėje ašyje naudojant "Flexbox". Naudodami justify-content galite labai lanksčiai išdėstyti elementus. Taip pat sužinojote apie įvairias savybes, kurios padės pasiekti norimą išdėstymą. Pasinaudokite šiomis žiniomis ir kurkite patrauklius ir patogius naudotojams dizainus!
Dažniausiai užduodami klausimai
Kas yra flexbox?flexbox yra CSS išdėstymo modulis, leidžiantis lanksčiai išdėstyti elementus konteineryje.
Kaip veikia savybė justify-content?Savybė justify-content nustato, kaip paskirstoma laisva erdvė tarp elementų ir aplink juos flexbox konteineryje.
Kokias flex-directions galiu naudoti?Elementų išdėstymui konteineryje valdyti galite naudoti row, row-reverse, column ir column-reverse.
Kuo skiriasi erdvė tarp elementų ir erdvė aplink?erdvė tarp elementų pirmąjį ir paskutinįjį elementus patalpina prie konteinerio krašto, o erdvė aplink sukuria vienodą erdvę aplink kiekvieną elementą.
