Patnubay ng Disenyo sa Flexbox at Grid

Kung ano ang kailangang malaman ng mga taga-disenyo tungkol sa mga tool sa pag-aayos ng pagbabago na ito.

Malayo na ang dumating sa CSS mula sa pagpapakilala nito noong 1996, ngunit ang mga tool na magagamit namin para sa layout ay hindi nagbago nang malaki. Ang mga layout ng talahanayan ay hindi mapaniniwalaan o kapani-paniwala masyadong matigas, float-based na mga layout ay talaga isang hack, hindi nakakapag-adaptable ang mga setting na nakabatay sa nakabase, at walang makakapangasiwaan ng isang mahusay na kumplikado sa isang mahusay na paraan. Hindi ako magkakamali - ang mga pamamaraan na ito ay nakuha sa amin ng malayo, ngunit hindi nila inilaan para sa mga komplikadong layunin ng layout.

Ang mga short-comings ng mga lumang pamamaraan para sa layout ay naging mas maliwanag na may tumutugon na disenyo ng web, kung saan yumakap sa likido ng Web ay pangunahing.

Sa flexbox at grid, sa wakas ay mayroon kaming mga tool na inilaan para sa layout na mas mahusay at walang bisa ng mga hack na kinakailangan sa mga nakaraang pamamaraan ng layout. Binubuksan nila ang mga bagong posibilidad sa mga lumang problema, pinapagana ang mga bagay na hindi pa nagagawa, at lutasin ang mga totoong problema na kinakaharap namin sa tumutugon sa disenyo ng web.

Flexbox

Ang Flexbox, aka CSS box na may kakayahang umangkop, ay isang bagong pamamaraan ng layout na nagbibigay sa amin ng kontrol sa pag-align na walang ibang pamamaraan ng CSS na maaaring makagawa. Ito ay higit sa 'micro layout': ang kakayahang i-align, mag-order, at ipamahagi ang puwang sa mga item sa isang lalagyan, o baguhin ang lapad o taas ng isang elemento upang pinakamahusay na punan ang magagamit na puwang.

Pinahusay na Balot

Sa Nakikiramay na Disenyo sa Web, ang lapad na magagamit ay magkakaiba-iba habang binabago ang laki ng viewport. Ito ay maaaring humantong sa hindi sinasadya na pambalot ng nilalaman, lalo na kung mas mahaba ang nilalaman kaysa sa idinisenyo, o ang makitid na lalagyan ay masyadong makitid. Marahil ay nakita nating lahat: ang mga account ng disenyo para sa haba ng nilalaman na 'perpekto', ngunit sa sandaling ipinatupad ito at idinagdag ang tunay na nilalaman, ang nilalaman ay bumabalot sa susunod na linya dahil walang sapat na puwang o nasira sa labas nito lalagyan Parehong hindi perpekto, at maaaring maging sanhi ng pagsira ng mga layout.

Ang problema ay hindi sigurado na ang magagamit na puwang ay palaging magiging sapat na malaki upang mapaunlakan ang nilalaman na maaaring magkakaiba sa haba. Ayon sa kaugalian, ginamit namin ang CSS Media Query upang ayusin ang layout sa mga partikular na breakpoints upang maibawas ang mga isyu sa pag-wrap ng nilalaman. Ngunit hindi isinasaalang-alang ng Media Query ang haba ng nilalaman mismo - tumugon sila sa isang tahasang lapad o taas. Kadalasan ay nagreresulta ito sa labis na dami ng mga query sa media upang makontrol ang isang tiyak na piraso ng nilalaman sa mga malinaw na mga breakcode.

Halimbawa ng pinabuting pambalot sa Flexbox

Nilulutas ng Flexbox ang problemang ito sa pamamagitan ng pagpapagana sa amin upang samantalahin ang puwang na magagamit at pagkatapos ay balutin ang nilalaman kung hindi. Ang pag-uugali ng awtomatikong ito ay hindi lamang maginhawa, ngunit pinapabuti ang pagpapanatili dahil hindi namin kailangang umasa sa breakpoint upang manu-manong ayusin ang estilo. Ang halimbawa sa itaas ay nagpapakita ng pag-uugali na ito: ipakita ang lokasyon ng label na katabi ng pamagat kung may sapat na puwang, at ihanay ang label ng lokasyon sa kaliwa sa ibaba ng pamagat kung ang sapat na puwang ay hindi magagamit.

Ang mga tradisyunal na pamamaraan tulad ng paglulutang ay magreresulta sa lokasyon ng lokasyon na natitira nang wasto na nakahanay sa mga maliliit na viewports, na mas mababa sa perpekto. Maaari mong iwasto ito sa pamamagitan ng paglulutang ng label sa kaliwa sa isang tukoy na lugar. Ang problema sa diskarte na ito ngayon ay nakasalalay ka sa isang takbo upang mabago ang estilo ng iyong nilalaman, na maaaring magkakaiba sa haba.

Pinahusay na Spacing & Alignment

Pagdating sa spacing at pag-align sa CSS, kailangan nating matalino upang magawa ang anumang bagay na hindi ang default na pag-uugali. Kahit na ang mga epekto na tila walang halaga ay maaaring maging nakakalito sa CSS, tulad ng patayong pag-align o pantay na paghahati ng puwang sa gitna ng mga item, dapat umasa sa mga workarounds o hacks. Ang ilang mga bagay ay talagang imposible na makamit.

Malulutas ito ng Flexbox sa pamamagitan ng pagpapagana ng pamamahagi ng puwang sa pagitan ng isang hindi kilalang bilang ng mga item sa loob ng isang lugar na hindi kilalang lapad o taas, at ihanay ang mga item sa X o Y axis. Gumagana ito tulad ng kung paano makontrol ng mga tool sa disenyo tulad ng Sketch o Illustrator ang spacing at pagkakahanay, pagpapagana ng kontrol na inaasahan namin sa Web.

Halimbawa ng pinahusay na pamamahagi ng puwang na may Flexbox

Ang isang mahusay na halimbawa ng kontrol na ito ay makikita sa itaas: ang mga item sa nabigasyon ay pantay na ipinamamahagi, patayo na nakasentro, at ang una at huling item ay flush sa gilid ng container container. Ito ay imposible na gamit ang tradisyonal na mga pamamaraan tulad ng pag-apply ng inline block sa mga item, o umasa sa layout ng mesa.

Order Order

Ang pagkakasunud-sunod ng pinagmulan ay tumutukoy sa pagkakasunud-sunod kung saan ang mga elemento ay ipinapakita sa pahina batay sa kung saan lumilitaw ang mga ito sa HTML. Bilang default, magpapakita ang mga elemento mula sa itaas hanggang sa ibaba at pakaliwa sa kanan nang default - ang kanilang lapad ay tinutukoy ng kanilang pagmamay-ari ng pagpapakita.

Ang likas na pagkakasunud-sunod ng pagkakasunud-sunod ng dokumento ay dapat gabayan sa iyo kapag iniisip kung paano ang iyong disenyo ay aangkop sa iba't ibang mga lapad ng viewport, ngunit may mga oras na kapaki-pakinabang na baguhin ito upang maiayos muli ang mga item. Ang tanging paraan upang gawin ito bago ang flexbox ay upang itago ang elemento at magpakita ng isa pa, na nagreresulta sa dobleng HTML, o umasa sa ganap na pagpoposisyon, na hindi palaging gumagana kapag ang laki ay maaaring magkakaiba sa laki. Sa pamamagitan ng flexbox, maaari mo lamang baguhin ang pagkakasunud-sunod ng mga item na may kakayahang umangkop nang hindi kinakailangang baguhin ang pinagbabatayan na istraktura ng HTML.

Halimbawa ng pag-order ng item gamit ang Flexbox

Ang halimbawa sa itaas ay nagpapakita ng pag-order sa Flexbox: ipinapakita namin ang logo sa kaliwang bahagi ng footer, na naaayon sa header. Sa mga maliit na viewports, ipinapakita namin ang mga lokasyon bago ang logo. Ang reordering na ito ay makatuwiran dahil ang mga lokasyon ay mas mahalaga sa konteksto na ito.

Gradong Layout

Ang layout ng grid ng CSS ay isang two-dimensional na layout ng system na partikular na nilikha para sa Web. Nagbibigay ito sa amin ng kakayahang hatiin ang pahina sa mga rehiyon na bawat isa ay maaaring higit na tinukoy sa mga tuntunin ng laki, posisyon, at layer, na nagreresulta sa isang hindi kapani-paniwalang makapangyarihang katutubong balangkas.

Pagkasyahin para sa Layunin

Ang CSS ay hindi kailanman nagkaroon ng isang tunay na akma para sa tool ng layout ng layunin, kaya kailangan naming makakuha ng medyo mapag-imbento sa kung paano namin mailalapat ang isang grid sa aming trabaho. Lumitaw ang mga frameworks ng grid upang mapunan ang pangangailangan na ito, ngunit hindi nang hindi ipinakilala ang kanilang sariling mga problema. Marami sa mga pinakasikat na mga frameworks ng grid ay nangangailangan ng kahulugan ng layout sa markup, na maaaring humantong sa bloat ng code, mga isyu sa pagpapanatili, at pagsabog ng paghihiwalay ng istraktura at pagtatanghal ng dokumento.

Sa pamamagitan ng grid, hindi na namin kailangan ng isang grid framework - ito ay isang katutubong balangkas na inihurnong sa CSS. Pinapayagan ka naming tukuyin ang layout sa CSS sa isang madaling maunawaan na paraan, habang tinatanggap ang default na pagkatubig ng Web. Ang mga kakayahan ng bagong tool ng layout na ito ay walang katapusang, at nagbibigay-daan sa amin upang makamit ang mga layout na posible lamang sa Javascript bago ito dumating.

Halimbawa ng Grid Layout

Susunod na Mga layout ng Web na Bumubuo

Pagdating sa layout, matagal na kaming natigil sa isang rut. Itinatag ang mga pattern at ang mga limitasyon ng mga nakaraang tool ng layout sa CSS ay humantong sa amin sa landas ng layout ng homogenous sa nakaraan. Hindi mo na kailangang lumayo sa Web upang makita ito: header, pangunahing nilalaman, sidebar, footer.

Ang pagdating ng tumutugon na disenyo ng web ay nagsimula ng ilang mga bagong ideya para sa layout ng pahina, at kasama nito ang ilang magagandang pattern ay nagsisimula na lumabas: kanal ang sidebar, gawing simple ang disenyo, at tumutok sa nilalaman. Ngunit nakikita rin natin ang mga pattern na lumitaw na napakaraming na kaya naririnig natin ang bulalas na "lahat ng mga website ay mukhang pareho".

Ang layout ng grid ay magpapahintulot sa amin na makalabas sa rut ng layout na napuntahan namin at ibigay sa amin ang mga tool na kailangan namin upang bumuo ng mga susunod na henerasyon na mga layout. Sa wakas maaari tayong magtayo sa paligid ng nilalaman sa halip na pilitin ito sa pangkaraniwang mga pattern ng disenyo na maaaring matagpuan sa bawat iba pang tumutugon website.

Isang Salita ng Pag-iingat

Mahalagang tandaan na hindi lahat ng mga browser ay sumusuporta sa mga tampok na flexbox at grid. Dapat nating isaalang-alang kung sino ang aming tagapakinig ay para sa bawat proyekto at tukuyin kung ang karamihan ng mga gumagamit ay makikinabang mula sa mga mas advanced na tampok na ito, habang nagbibigay ng isang makatwirang pagkabagsak para sa hindi pagsuporta sa mga browser. Ganap na katanggap-tanggap na maibigay ang mga gumagamit sa mga browser ng legacy na may isang pinasimple na bersyon ng iyong UI, at pinahusay ito para sa mga gumagamit sa mga mas bagong browser.

Meron pa. Marami pa.

Nasusukat lamang namin ang ibabaw ng kung ano ang magagawa ng flexbox at grid. Sa kabutihang palad, maraming magagandang dokumentasyon na magagamit na hawakan ang mga kakayahan ng mga bagong tool sa layout. Narito ang ilan sa aking mga paborito:

Flexbox

Grid

Ang sinumang nagtatayo para sa Web ay masakit na nakakaalam ng iba't ibang mga limitasyon pagdating sa layout sa CSS. Kadalasan, kinakailangan nito na ikompromiso ang disenyo upang ito ay gumagana tulad ng inaasahan sa pag-unlad, o mas masahol pa, umasa sa Javascript upang maipatupad ang pag-uugali na kailangan namin.

Ang pagdating ng flexbox at layout ng grid ng signal ay isang bagong panahon ng layout sa Web. Dapat tayong magpatibay ng isang bagong mindset pagdating sa layout upang hindi limitado sa mga gawi, drawbacks at hacks ng nakaraan. Niyakap natin ang mga bagong tool at baguhin ang aming paggalugad para sa kung ano ang posible sa layout sa Web.