Impela, nakhu ukubheka okujulile kokuthi ungayifaka kanjani i-Flexbox:
I-Flexbox, emfushane ye-Flexible Box Module, iyimodeli yesakhiwo ku-CSS3 ehlinzeka ngesixazululo esilula nesidingeka kakhulu sokuklama izakhiwo eziphendulayo eziguquguqukayo ngaphandle kokusebenzisa ukuntanta noma ukuma.
Imojuli yebhokisi eguquguqukayo iqondise inkinga efanayo eyenziwa yiGridi Layout kodwa ngendlela ehlukile, ngakho ingase ifaneleke kahle iphrojekthi yakho uma ubhekene nesakhiwo sohlangothi olulodwa.
Ifaka i-Flexbox
Ukuze usebenzise izici ezimangalisayo ze-Flexbox, onjiniyela badinga ukuyifaka ku-codebase yabo. Nokho, akukho ukufakwa ngakunye okuhilelekile njengoba ubungenza ngelabhulali noma uhlaka. Izakhiwo ze-Flexbox ziyingxenye ye-CSS, ehlanganiswe kuzo zonke iziphequluli zewebhu zesimanje.
Ukufanekisa, ngizobhala ikhodi eyisampula lapha:
// HTML <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> // CSS .flex-container { display: flex; }
Ngemva kokufaka indawo 'yokubonisa: shintsha' esitsheni esingumzali, zonke izingane eziseduze ziba izinto eziguqukayo.
Izakhiwo ze-Flexbox
Ukuqonda amagama nezakhiwo ze-Flexbox kubalulekile ukuze ukusebenzise ngempumelelo kuphrojekthi yakho. I-Flexbox ihlanganisa amasethi amabili ezakhiwo: izakhiwo zesitsha somzali kanye nezakhiwo zento yengane.
Izakhiwo zesiqukathi esingumzali zifaka:
- isibonisi: i-flex noma i-inline-flex
- i-flex-direction: irowu, irowu-reverse, ikholomu, ikholomu-reverse
- cacisa-okuqukethwe: isiqalo esishintshashintshayo, isiphetho se-flex, isikhungo, isikhala-phakathi, isikhala-nxazonke, isikhala-ngokulinganayo
Izinto zezingane zihlanganisa:
- Oda
- shintsha-khula
- i-flex-shrink
- isisekelo se-flex
- ziqondanise
I-Flexbox in Action
Manje ake sibone isibonelo esiyinkimbinkimbi kakhulu nge Izakhiwo ze-Flexbox. Lapha, ama-elementi abekwe ngokulandelana komugqa ongemuva, futhi anwetshwe ukuze agcwalise isiqukathi siqonde phezulu:
// HTML <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> // CSS .flex-container { display: flex; flex-direction: row-reverse; align-items: stretch; }
Uma usujwayele lezi zakhiwo, uzothola lokho I-Flexbox yenza izakhiwo eziningi eziyinkimbinkimbi zibe lula ukuzisebenzisa.
Ukuhlola Amalabhulali e-Flexbox
Ngenkathi i-vanilla Flexbox ihlinzeka ngesixazululo esinamandla semiklamo yesakhiwo, kunemitapo yolwazi eminingi efana nayo I-Flexy Boxes, i-CSS3 Flexbox Playground, futhi Ixazululwe yi-Flexbox lokho kungakusiza ukuthi uqonde futhi usebenzise i-Flexbox ngempumelelo kakhudlwana.
Sengiphetha (nakuba ngingamaki lesi sigaba ngokusobala), ngokufunda ukusebenzisa i-Flexbox nezici zayo ngempumelelo, abathuthukisi bangakha izakhiwo eziguquguqukayo nezivumelana nezimo kalula ezihlangabezana nezindinganiso zomklamo wewebhu wesimanje. I-Flexbox, namandla ayo okusabalalisa isikhala nokuqondanisa, ihlinzeka ngempela ngebhokisi eliguquguqukayo lezidingo zakho zesakhiwo.