Turinys:

Kaip sukurti tinklelio išdėstymą CSS?
Kaip sukurti tinklelio išdėstymą CSS?

Video: Kaip sukurti tinklelio išdėstymą CSS?

Video: Kaip sukurti tinklelio išdėstymą CSS?
Video: css-0 2024, Gegužė
Anonim

Apibendrinkime keturis esminius žingsnius:

  1. Sukurti konteinerio elementą ir paskelbti, kad jis rodomas: tinklelis ;.
  2. Naudokite tą patį konteinerį, kad apibrėžtumėte tinklelis takelius naudojant tinklelis - šabloną -stulpeliai ir tinklelis - šabloną -rows savybės.
  3. Įdėkite antrinius elementus į konteinerį.
  4. Nurodykite latakų dydžius naudodami tinklelis - tarpo savybės.

Ar galiu naudoti CSS tinklelio išdėstymą?

Išskyrus „Internet Explorer“, CSS tinklelio išdėstymas yra be priešdėlio „Safari“, „Chrome“, „Opera“, „Firefox“ir „Edge“. Visų šiuose vadovuose aprašytų savybių ir verčių palaikymas yra suderinamas visose naršyklėse. Tai reiškia, kad jei parašysite kai kuriuos Tinklelio išdėstymas kodą „Firefox“, „Chrome“jis turėtų veikti taip pat.

Be to, ar turėčiau naudoti „Flexbox“arba tinklelį? Abu flexbox ir tinklelis yra pagrįsti šia koncepcija. Flexbox geriausiai tinka elementams išdėstyti vienoje eilutėje arba viename stulpelyje. Tinklelis geriausiai tinka elementams išdėstyti keliose eilutėse ir stulpeliuose. Turinio pagrindimo ypatybė lemia, kaip papildoma erdvė lankstus -konteineris išdalinamas į lankstus - daiktai.

Be to, kas yra 1 fr?

1fr yra vienas „trupmeninis vienetas“, kuris yra būdas pasakyti „likusi elemento erdvė“.

Kas yra „Flexbox“tinklelis?

Flexbox yra sukurtas vieno matmens maketams ir Tinklelis yra skirtas dviejų matmenų išdėstymui. Tai reiškia, kad jei išdėstote elementus viena kryptimi (pavyzdžiui, trys mygtukai antraštėje), turėtumėte naudoti Flexbox : Tai suteiks daugiau lankstumo nei CSS Tinklelis.

Rekomenduojamas: