"Flexbox" CSS: Suprasti flex bazės ir flex krypties reikšmę

"Flexbox" yra galingas CSS išdėstymo modulis, leidžiantis kurti lanksčius ir reaguojančius maketus. Šioje pamokoje daugiausia dėmesio skirsime flex-basis savybei , kuri yra atsakinga už elemento bazinio dydžio nustatymą flex kryptimi. Labai svarbu nurodyti antrinių elementų dydį, neatsižvelgiant į konkrečius flex konteinerio matmenis. Tinkamai naudodami flex-basis, galite gerokai supaprastinti ir optimizuoti maketavimo dizainą.

Pagrindinės išvados

• flex-basis apibrėžia pradinį elemento dydį flex konteinerio kryptimi.
• Pagal numatytuosius nustatymus flex-basis reikšmė yra 0 %, o tai reiškia, kad elementas užima tik tiek vietos, kiek reikia turiniui.
• Naudojant flex-grow ir flex-shrink, elementas gali koreguoti savo dydį priklausomai nuo turimos vietos.
• Flex kryptis turi įtakos bazinio dydžio interpretacijai.

Žingsnis po žingsnio

Pirmiausia pažvelkime, kaip flex-base veikia flex makete. Pradėkite nuo paprasto pavyzdžio. Įsitikinkite, kad nustatėte flex konteinerį su elementais.

Pirmiausia apibrėžkite savo flex konteinerį. Mūsų pavyzdyje konteineriui nustatėme display: flex ir flex-direction: row. Tai leidžia vaikams priklausančius elementus išdėstyti horizontaliai vieną šalia kito.

Kitas dalykas, kurį norite padaryti, yra pasirinkti konteinerio elementą ir pritaikyti flex savybę. Čia naudojame flex: 1, kuri yra flex-grow, flex-shrink ir flex-base derinys. Pažvelkime į atskirus komponentus.

Naudojant flex: 1, elementas bus flex dydžio, o bazinis numatytasis dydis bus 0 %. Tai reiškia, kad jis užims tik tiek vietos, kiek reikia turiniui.

Dabar atidžiau pažvelkime į flex-base savybę. Ją galite nurodyti tiesiogiai, pavyzdžiui, pradėdami keisti iš flex į flex-basis: 100px. Tai nustatys pradinį elemento plotį 100 pikselių.

Išsaugokite pakeitimus ir pamatysite, kad pagrindinis elementas dabar yra 100 pikselių pločio. Šie 100 pikselių yra bazinis plotis, nuo kurio priklauso naršyklės išdėstymas.

Tai reiškia, kad elementas gali užimti daugiau vietos, jei įjungus funkciją flex-grow jam suteikiama daugiau vietos, arba mažiau, jei įjungta funkcija flex-shrink.

Taip pat galite nurodyti procentinius dydžius. Pakeiskite reikšmę į flex-basis: 100%, o tai reiškia, kad elementas turėtų užimti visą konteineryje esančią erdvę.

Jei dabar nustatysite flex-basis reikšmę 0, pamatysite, kad elementas susitraukia iki turinio nurodyto pločio. Svarbu atkreipti dėmesį, kad 0 nereiškia, jog elementas neturi jokio pločio, jis tik nustatomas pagal minimalų turinį.

Dažniausiai naudojama flex-basis reikšmė yra auto. Nustačius šią reikšmę, maketas tampa labai lankstus, nes plotis kinta priklausomai nuo turinio. Patikrinkite tai aiškiai nustatydami plotį, tarkime, 200px, ir pažiūrėkite, kaip elementas užima 200 pikselių.

Taip pat galite keisti lankstumo kryptį. Nustatykite lankstumo kryptį į stulpelį. Tai pakeičia bazinio dydžio interpretavimo būdą - dabar bazinis dydis taikomas vertikalia kryptimi.

Jei dabar pakeisite lankstumo bazę, todėl turite pakoreguoti elemento aukštį. Jei nustatysite flex-basis 100 pikselių, elementas bus 100 pikselių aukščio, o jūs galėsite lanksčiai keisti mastelį priklausomai nuo turinio.

Svarbu tai suprasti, nes, nors plotis ir aukštis yra statiški, flex-base keičiasi priklausomai nuo lankstumo krypties. Dėl to flexbox yra daug lankstesnis, palyginti su tradiciniais išdėstymo metodais.

Be to, kitame žingsnyje paaiškinsime flex-grow ir flex-shrink reikšmę kartu su flex-base. Šios reikšmės apibrėžia, kiek vietos elementas užima konteineryje, priklausomai nuo jo dydžio ir turimų išteklių.

Apibendrinimas

Šiame vadove susipažinote su flex-basis savybės pagrindais. Dabar žinote, kaip naudoti šią savybę elemento baziniam dydžiui apibrėžti ir kaip lankstumo kryptis veikia išdėstymo rodymą. Turėdami šių žinių, esate pasirengę kurti išplėstinius flexbox maketus, lanksčiai prisitaikančius prie skirtingų ekrano dydžių ir turinio.