"CSS Flexbox" turi įvairių savybių, kurios padeda kurti svetainės išdėstymą. Viena iš šių savybių yra flex-flow , kuri yra flex-direction ir flex-wrap derinys. Šis kompaktiškas stilius leidžia aiškiau ir glaustai išreikšti savo ketinimus. Šiame vadove žingsnis po žingsnio paaiškinsiu, kaip veiksmingai naudoti flex-flow.
Pagrindinės įžvalgos
- Savybė flex-flow sujungia flex-direction ir flex-wrap reikšmes, todėl galite naudoti lankstesnį ir trumpesnį stilių.
Ką turėtumėte žinoti apie flex-flow savybę
Norint visapusiškai išnaudoti flex-flow galimybes, pirmiausia svarbu susipažinti su dviem atskiromis savybėmis: flex-direction ir flex-wrap.
Maketavimo pagrindai
Pirmiausia apžvelkime pradinę situaciją. Turite konteinerį su aštuoniais div elementais, kurie rodomi vienas šalia kito kaip flexbox. Konteinerio fiksuotas plotis yra 500 pikselių, o kiekvieno div elemento plotis - 100 pikselių. Tai reiškia, kad eilutėje telpa tik keturi div elementai. Jei reikia daugiau vietos, be papildomų nustatymų nieko neįvyksta.
Kad divai būtų rodomi teisingai, nustatėme display: flex ir flex-direction: row. Tačiau esant tokiai konfigūracijai divai greitai viršija konteinerio plotį, o tai nėra pageidautina.
Flex-flow naudojimas
Dabar naudojame flex-flow savybę, kad apibrėžtume ir apvyniojimo kryptį, ir elgseną. Naudodami flex-flow galite nurodyti šių dviejų savybių derinį, pavyzdžiui, flex-flow: row wrap;.
Tai reiškia, kad divai bus automatiškai apvyniojami, jei neužteks vietos. Taip sukuriamas aiškus, organizuotas išdėstymas.
Atvirkštinis apvyniojimas
Dar viena naudinga savybė - atvirkštinė kryptis ir apvyniojimo elgsena. Jei naudojate flex-flow: row wrap-reverse;, divai pradedami nuo apačios ir atitinkamai pakeičia kryptį.
Kai kuriuose projektuose tai gali būti pageidautina siekiant sukurti dinamiškesnę ir įdomesnę naudotojo sąsają.
Kiti deriniai
Flex-flow savybė yra labai lanksti ir leidžia sukurti daugybę derinių. Pavyzdžiui, galite naudoti flex-flow: column wrap;, kad elementus išdėstytumėte vertikaliai, išlaikydami galimybę juos apvynioti.
Jei norite pakeisti kryptį, nustatykite flex-flow: column wrap-reverse;, tada elementai bus rodomi atvirkštine tvarka iš viršaus į apačią.
Savybės flex-flow privalumai
Pagrindinis flex-flow privalumas - CSS taisyklių supaprastinimas. Užuot nurodę dvi atskiras savybes, viską galite apibrėžti vienoje eilutėje. Taip ne tik sutaupoma laiko programuojant, bet ir jūsų kodas tampa skaitomesnis.
Kitas pavyzdys būtų flex-flow: column;, kuris pagal nutylėjimą palieka aktyvią savybę wrap. Jei vėliau norite pakeisti flex-wrap reikšmę, galite tai padaryti toje pačioje eilutėje.
Išvada apie flex-flow naudojimą
Apibendrinant galima teigti, kad flex-flow naudojimas yra labai praktiškas būdas padaryti flexbox išdėstymą aiškesnį ir trumpesnį. Galite apibrėžti ir pertraukų kryptį, ir elgseną nerašydami ilgų ir painių CSS taisyklių.
Apibendrinimas
Savybė flex-flow yra itin naudinga CSS funkcija, padedanti efektyviau kurti svetainės flexbox struktūrą. Ji leidžia vienoje instrukcijoje sujungti ir lankstumo kryptį, ir užlenkimą. Palengvinkite savo darbą ir išsaugokite švarų kodą!
Dažniausiai užduodami klausimai
Kaip veikia savybė flex-flow?Savybė flex-flow sujungia flex kryptį ir flex apvyniojimą vienoje CSS eilutėje.
Ar galiu naudoti flex-flow be apvyniojimo?taip, galite naudoti flex-flow: row;, kad nustatytumėte kryptį be priverstinio apvyniojimo.
Kas atsitiks, jei nurodysiu tik vieną flex-flow reikšmę?Jei nurodyta tik viena reikšmė, flex-wrap bus nustatyta numatytoji reikšmė "no-wrap".
Ar taip pat galiu atskirai nustatyti flex-direction ir flex-wrap reikšmes?Taip, reikšmes galima nustatyti ir atskirai, tačiau flex-flow yra kompaktiškesnis ir aiškesnis variantas.
Ar galiu derinti flex-flow su medijos užklausomis?Taip, galite naudoti flex-flow medijos užklausose, kad sukurtumėte reaguojančius maketus.
