Talaan ng mga Nilalaman:

Paano mo ginagamit ang Flexbox at grid?
Paano mo ginagamit ang Flexbox at grid?

Video: Paano mo ginagamit ang Flexbox at grid?

Video: Paano mo ginagamit ang Flexbox at grid?
Video: DAPAT BANG BAYARAN KA NG GOBYERNO PAG GINAWANG RIGHT OF WAY ANG LUPA MO? 2024, Mayo
Anonim

Nag-aayos kami ng mga elemento bilang mga row at column sa web mula noong kami ginamit mga talahanayan para sa layout. pareho flexbox at grid ay batay sa konseptong ito. Flexbox ay pinakamahusay para sa pag-aayos ng mga elemento sa alinman sa isang hilera, o isang solong column. Grid ay pinakamainam para sa pag-aayos ng mga elemento sa maraming row at column.

Kasunod nito, maaari ring magtanong, maaari mo bang gamitin ang Flexbox at grid nang magkasama?

Karamihan ay No. Grid ay mas bago kaysa sa Flexbox at may kaunting suporta sa browser. sila pwede trabaho magkasama : a grid aytem pwede maging a flexbox lalagyan. A baluktot aytem pwede maging a grid lalagyan.

Gayundin, mas mahusay ba ang CSS grid kaysa sa Flexbox? CSS grids ay para sa mga 2D na layout. Gumagana ito sa parehong mga row at column. Flexbox gumagana mas mabuti sa isang dimensyon lamang (alinman sa mga row O mga hanay). Ito ay magiging higit pa makatipid ng oras at makatutulong kung gagamitin mo ang dalawa nang sabay.

Alinsunod dito, ano ang Flexbox grid?

Flexbox ay ginawa para sa isang dimensional na layout at Grid ay ginawa para sa dalawang dimensional na layout. Nangangahulugan ito na kung naglalagay ka ng mga item sa isang direksyon (halimbawa tatlong mga pindutan sa loob ng isang header), dapat mong gamitin Flexbox : Bibigyan ka nito ng higit na kakayahang umangkop kaysa sa CSS Grid.

Kailan mo dapat hindi gamitin ang Flexbox?

Kailan hindi dapat gumamit ng flexbox

  1. Huwag gumamit ng flexbox para sa layout ng page. Ang pangunahing sistema ng grid na gumagamit ng mga porsyento, max-width, at mga query sa media ay isang mas ligtas na diskarte para sa paglikha ng mga tumutugon na layout ng pahina.
  2. Huwag magdagdag ng display:flex; sa bawat solong container div.
  3. Huwag gumamit ng flexbox kung marami kang trapiko mula sa IE8 at IE9.

Inirerekumendang: