Šajā uzdevumā padziļināti izpētīsiet CSS elastīgās kastes īpašības , jo īpaši vietas sadalījumu starp pakārtotajiem elementiem elastīgajā konteinerā. Šeit uzzināsiet, kā pielāgot flex vērtību, lai daži elementi aizņemtu vairāk vietas nekā citi. Šāds domāšanas veids prasa nedaudz matemātikas, bet neuztraucieties - tas ir vieglāk, nekā šķiet!
Mēs kopā apskatīsim vienkāršu piemēru, kurā parādīts, kā, pielāgojot flex īpašības, var efektīvi veidot elementu izkārtojumu.
Galvenās atziņas
- Flexbox nodrošina elastīgu un pielāgojamu elementu izkārtojumu.
- Flex vērtība ir izšķiroša telpas sadalījumam starp pakārtotajiem elementiem.
- Iestatot pareizo vērtību, var panākt, ka atsevišķi elementi izskatās dominējošāk.
Soli pa solim
Vispirms apskatīsim esošo izkārtojumu un sagatavosim visu vingrinājumam.
Jums ir konteiners, kuram jau ir iestatīts displejs: flex. Mēs iestatām konteinera platumu uz 400 pikseļiem un augstumu uz 200 pikseļiem. Tas ļauj skaidri apskatīt elementus.
Konteinerī ir pieci div elementi, kuriem ir piešķirta klase Box. Katram no šiem div elementiem ir kontūra, lai parādītu robežas, un fona krāsa, kas ir balta dūmu krāsa.
Uzdevums ir tāds, ka vidējam div elementam, t. i., ar klasi L3, jāaizņem puse no konteinerā esošās vietas. Tas atbilst 200 pikseļiem. Pārējiem četriem div elementiem atlikušie 200 pikseļi jāsadala vienādi.
Tas nozīmē, ka katrs no šiem četriem div elementiem saņems 50 pikseļus (200 pikseļi dalīti ar 4). Attiecīgi jānoregulē flex vērtības, lai trešajam elementam būtu vairāk vietas.
Tagad ir pienācis laiks iestatīt flex īpašības. Vispirms iestatiet flex vērtību 1 visiem atvasinātajiem elementiem, izņemot vidējo, bet vidējam elementam piešķiriet tādu flex vērtību, kas ļauj tam iegūt vairāk vietas. Šajā gadījumā izmantojiet vērtību 4.
Pēc vērtību iestatīšanas saglabājiet izmaiņas un apskatiet rezultātu. Pārlūkprogrammas izstrādātāja rīkos varat pārbaudīt, vai izkārtojums izskatās tā, kā to esat iedomājies.
Tagad centra div elementa platumam vajadzētu būt 200 pikseļu platumam, bet pārējiem četriem div elementiem katram jābūt 50 pikseļu platiem. Aprēķinot lokanības vērtības, ir svarīgi, lai lokanības vērtību summa būtu vienāda.
Tas nozīmē, ka, saskaitot kopā 1., 2., 4. un 5. elementa flex vērtības (t. i., 1 + 1 + 1 + 1 + 1), iegūsiet 4. Vidējā elementa flex vērtība ir 4, un kopā tas dod kopā 8.
Lai saprastu, cik daudz vietas atvēlēt katram elementam, varat izmantot visu konteinera platumu (400 pikseļi). Daļa no 8 elastīgajām vienībām nozīmē, ka 1 elastīgā vienība ir 50 pikseļi. Ja 400 pikseļus dalām ar 8, iegūstam 50 pikseļus pārējiem četriem elementiem un 200 pikseļus centrālajam elementam.
Tas nozīmē, ka jūs varat perfekti kontrolēt izkārtojumu, pielāgojot elastīguma vērtības. Tādējādi tiek izveidots līdzsvarots dizains, kas ir gan pielāgojams, gan pārskatāms.
Kopsavilkums
Šajā vingrinājumā esat iemācījušies, kā iestatīt elastīgās kastes īpašības, lai konteinerā esošie atvasinātie elementi efektīvi izmantotu vietu. Izprotot flex vērtības un to matemātisko pielietojumu, jūs varat konkrēti noteikt, cik daudz vietas katram elementam vajadzētu aizņemt. Izmantojot šo metodi, jūs esat labi sagatavoti, lai izstrādātu sarežģītākus izkārtojumus.
Biežāk uzdotie jautājumi
Kā iestatīt flex vērtību atvasinātajam elementam?Jūs varat iestatīt flex vērtību, izmantojot CSS īpašību flex savā stilu lapā.
Kāpēc ir svarīga flex vērtību summa?summa nosaka atstarpes attiecību starp elementiem.
Vai es varu izmantot dažādas flex vērtības?Jā, lai kontrolētu izkārtojumu, katram elementam varat piešķirt individuālu flex vērtību.
