Šiame vadove aprašoma viena iš galingiausių "CSS Flexbox" funkcijų - lankstusis apvyniojimas. Flexbox labai supaprastina elementų išdėstymą ir lygiavimą tinklalapių maketuose. Kai vietos konteineryje yra nedaug, flex wrap leidžia antriniams elementams apvynioti, o ne susitraukti. Tai padeda kurti patrauklius ir reaguojančius dizainus. Apžvelgsime, kaip veikia flex wrap, jo skirtingas reikšmes ir naudojimo pavyzdžius.
Pagrindinės žinios
- Flexbox leidžia kurti reaguojantį svetainių dizainą.
- Naudodami lankstųjį apvyniojimą galite valdyti, ar ir kaip bus apvyniojami papildomi elementai, kai konteineriui pritrūks vietos.
- Yra trys pagrindinės flex-wrap reikšmės: nowrap, wrap ir wrap-reverse.
- Tinkamai sukonfigūravus align-items ir justify-content, galima dar labiau optimizuoti išdėstymą.
Žingsnis po žingsnio vadovas
1 veiksmas: sukurkite "flex" konteinerį
Pirmiausia turėtumėte sukurti flex konteinerį. Nustatykite elemento, kuriame yra antrinių elementų, rodymo reikšmę flex.
2 veiksmas: suaktyvinkite flex apvyniojimą
Norėdami suaktyvinti apvyniojimo elgseną, turite nustatyti flex-wrap savybę į wrap. Dėl to antrininkai bus apvyniojami į kitą eilutę, jei nepakanka vietos.
3 veiksmas: Pritaikykite antrinius elementus
Dabar pridėkite antrinių elementų, kad išbandytumėte, kaip jie elgiasi, kai yra apvyniojami. Galite iš dalies nustatyti jų plotį; svarbu, kad talpykla būtų mažesnė už pavaldžiųjų elementų pločių sumą.
4 veiksmas: patikrinkite lankstų apvyniojimą
Pridėję antrinius elementus, patikrinkite, kaip elgiasi konteineris. Turėtumėte matyti, kad paskutiniai antriniai elementai apvyniojami į kitą eilutę, jei konteineryje nepakanka vietos.
5 veiksmas: sureguliuokite lankstumo kryptį
Taip pat galite nustatyti flex kryptį į stulpelį, jei norite dirbti vertikaliame išdėstyme. Tokiu atveju išdėstymas elgsis kitaip ir taip pat prisitaikys prie aukščio.
6 veiksmas: sulygiuokite antrinius elementus
Naudokite align-items, kad išdėstytumėte antrinius elementus eilutėse. Galite nustatyti tokias reikšmes, kaip flex-start, flex-end arba centre, kad valdytumėte vertikalųjį išlyginimą.
7 veiksmas: nustatykite justify-content
Savybė justify-content padeda valdyti tarpą tarp eilutėje esančių pavaldžiųjų elementų. Yra keletas parinkčių, pavyzdžiui, space-between, space-around arba flex-start. Išbandykite jas, kad pamatytumėte, kaip reaguos jūsų išdėstymas.
8 veiksmas: naršyklėje reaguojantis dizainas
Vienas iš "FlexWrap" privalumų yra jo reaktyvumas. Galite išplėsti arba susiaurinti talpyklą ir stebėti, kaip priklausomi elementai persitvarko priklausomai nuo laisvos vietos. Tai ypač svarbu, jei norite kurti skirtingo dydžio įrenginiams pritaikytą dizainą.
9 veiksmas: naudokite atvirkštinį apvyniojimą
Norėdami elementus rodyti atvirkštine tvarka, nustatykite flex-wrap į wrap-reverse. Taip antriniai elementai iš apačios perkeliami į kitos eilutės viršų.
10 veiksmas: Įgyvendinimas skirtinguose išdėstymuose
Flex-wrap galima naudoti įvairiuose maketuose: nuo didelių galerijų iki paprastų langelių. Pagal poreikį pritaikykite matmenis ir išdėstymą, kad pasiektumėte geriausią įmanomą rezultatą.
Apibendrinimas
Šiame vadove sužinojote, kaip naudoti CSS savybę flex wrap. Flexbox yra puikus būdas kurti reaguojančius žiniatinklio dizainus. Naudodami vos kelias CSS eilutes, galite lengvai išdėstyti ir pritaikyti priklausomus elementus, kad sukurtumėte prisitaikantį maketą, kuris puikiai atrodys skirtingo dydžio ekranuose.
Dažniausiai užduodami klausimai
Kas yra flexbox?flexbox yra CSS išdėstymo modulis, leidžiantis lanksčiai išdėstyti ir sulygiuoti elementus konteineryje.
Kaip veikia flex-wrap?flex-wrap kontroliuoja, kaip bus apvyniojami flekso konteinerio antriniai elementai, jei nėra pakankamai vietos.
Kokias reikšmes gali įgyti flex-wrap?flex-wrap gali įgyti reikšmes nowrap, wrap ir wrap-reverse.
Kaip padaryti, kad išdėstymas reaguotų į poreikius?Naudodami flexbox ir flex-wrap, galite pritaikyti turinį, atsižvelgdami į tai, kiek vietos yra konteineryje.
Kokią įtaką išdėstymui daro align-items?align-items nustato, kaip vertikaliai eilutėse išlyginami antriniai elementai.
