Šī rokasgrāmata ir par vienu no spēcīgākajām CSS Flexbox funkcijām: elastīgo ietīšanu. Flexbox ievērojami vienkāršo elementu izkārtojumu un izlīdzināšanu tīmekļa lapu izkārtojumos. Ja vieta konteinerā ir ierobežota, flex wrap ļauj pakārtotajiem elementiem nevis sarukt, bet gan apvilkties. Tas palīdz veidot pievilcīgus un atsaucīgus dizainus. Mēs aplūkosim, kā darbojas flex wrap, tā dažādās vērtības un lietošanas piemērus.
Galvenās atziņas
- Flexbox ļauj veidot responsīvu vietņu dizainu.
- Izmantojot elastīgo ietīšanu, varat kontrolēt, vai un kā tiek ietīti pakārtotie elementi, kad konteinerā pietrūkst vietas.
- Ir trīs galvenās flex-wrap vērtības: nowrap, wrap un wrap-reverse.
- Pareiza align-items un justify-content konfigurācija var vēl vairāk optimizēt izkārtojumu.
Soli pa solim
1. posms: Izveidojiet elastīgo konteineru
Vispirms ir jāizveido flex konteiners. Elementam, kas satur pakārtotos elementus, iestatiet displeja vērtību flex.
Solis Nr. 2: Aktivizējiet flex wrap
Lai aktivizētu wrap uzvedību, ir jāiestata flex-wrap īpašība wrap. Tādējādi pakārtotie elementi tiks ietīti nākamajā rindā, ja nav pietiekami daudz vietas.
Solis Nr. 3: Pielāgojiet pakārtotos elementus
Tagad pievienojiet pakārtotos elementus, lai pārbaudītu, kā tie uzvedīsies, kad tie ir ietīti. Varat daļēji iestatīt to platumu; svarīgi, lai konteiners būtu mazāks par pakārtoto elementu platumu summu.
4. solis: pārbaudiet elastīgo ietīšanu
Kad esat pievienojuši pakārtotos elementus, pārbaudiet konteinera uzvedību. Jums vajadzētu redzēt, ka pēdējie pakārtotie elementi tiek ietīti nākamajā rindā, ja konteinerā nav pietiekami daudz vietas.
Solis Nr. 5: Pielāgojiet elastības virzienu
Ja vēlaties strādāt vertikālā izkārtojumā, varat arī iestatīt elastīgo virzienu uz kolonnu. Šajā gadījumā izkārtojums uzvedīsies citādi un arī pielāgosies augstumam.
6. solis: Izlīdziniet pakārtotos elementus
Izmantojiet align-items, lai izvietotu pakārtotos elementus rindās. Lai kontrolētu vertikālo izlīdzināšanu, varat iestatīt tādas vērtības kā flex-start, flex-end vai center.
7. solis: Iestatiet justify-content
Īpašība justify-content palīdz kontrolēt atstarpi starp rindu pakārtotajiem elementiem. Ir vairākas iespējas, piemēram, atstarpe starp, atstarpe ap vai flex-start. Izmēģiniet tās, lai redzētu, kā reaģē jūsu izkārtojums.
8. posms: Uz pārlūkprogrammu reaģējošs dizains
Viena no FlexWrap stiprajām pusēm ir tā reaģētspēja. Varat paplašināt vai sašaurināt konteineru un vērot, kā mainās pakārtoto elementu izkārtojums atkarībā no pieejamās vietas. Tas ir īpaši svarīgi, ja vēlaties izveidot dizainu dažādiem ierīču izmēriem.
9. darbība: Izmantojiet apgriezenisko wrap
Lai elementus attēlotu apgrieztā secībā, iestatiet flex-wrap uz wrap-reverse. Tādējādi pakārtotie elementi no apakšas pārvietosies uz nākamās rindas sākumu.
10. solis: Īstenošana dažādos izkārtojumos
Flex-wrap var izmantot daudzos izkārtojumos: no lielām galerijām līdz vienkāršām kastēm. Pielāgojiet izmērus un izkārtojumu pēc vajadzības, lai sasniegtu vislabāko iespējamo rezultātu.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot īpašību flex wrap CSS. Flexbox ir lielisks veids, kā izveidot responsīvus tīmekļa dizainus. Izmantojot tikai dažas CSS rindiņas, varat viegli izvietot un pielāgot atvasinātos elementus, lai izveidotu responsīvu izkārtojumu, kas lieliski izskatās dažādos ekrāna izmēros.
Biežāk uzdotie jautājumi
Kas ir flexbox?flexbox ir CSS izkārtojuma modulis, kas ļauj elastīgi izvietot un izlīdzināt elementus konteinerā.
Kā darbojas flex-wrap?flex-wrap kontrolē, kā tiek iesaiņoti pakārtotie elementi elastīgajā konteinerā, ja nav pietiekami daudz vietas.
Kādas vērtības var pieņemt flex-wrap?flex-wrap var pieņemt vērtības nowrap, wrap un wrap-reverse.
Kā padarīt izkārtojumu reaģētspējīgu?Izmantojot elastīgo lodziņu un flex-wrap, varat pielāgot saturu atkarībā no tā, cik daudz vietas ir pieejams konteinerā.
Kāda ir align-items ietekme uz izkārtojumu?align-items nosaka, kā pakārtotie elementi tiek vertikāli izlīdzināti rindās.
