Šajā pamācībā es parādīšu, kā izveidot elastīgu izkārtojumu ar trim kolonnām un trim rindām, izmantojot CSS Flexbox. Šo izkārtojumu ir ne tikai viegli īstenot, bet tas arī dinamiski pielāgojas pieejamai ekrāna vietai. Flexbox ievērojami atvieglo reaģējoša dizaina izveidi un padara lieku vecāku izkārtojuma paņēmienu, piemēram, pludiņu vai rindu bloku, izmantošanu.
Galvenie secinājumi
- Flexbox ļauj veidot izkārtojumus, izmantojot tikai dažas CSS rindiņas.
- Tālāk es jums soli pa solim parādīšu, kā izveidot un pielāgot 3 kolonnu, 3 rindu izkārtojumu.
Soli pa solim
1. solis: Iniciējiet HTML struktūru
Vispirms izveidojiet savas vietnes pamata struktūru, izmantojot trīs div elementus. Katram divelementam tiek piešķirta klase "Box". Vēlāk tie tiks izvietoti elastīgajā konteinerā.
Solis Nr. 2: Stilizējiet kastes
Tagad pievienojiet CSS, lai piešķirtu lodziņiem vieglāku dizainu ar polsterējumu un apmali. Izmantojiet box-sizing: border-box;, lai atvieglotu izmēru apstrādi.
Solis Nr. 3: Iestatiet elastīgo konteineru
Tagad ir jādefinē vecākais konteiners kā elastīgs konteiners. Iestatiet display: flex; un flex-direction: row;, lai sakārtotu kastes rindā. Katram lodziņa elementam iestatiet flex vērtību 1, lai tie vienmērīgi aizņemtu pieejamo vietu.
Solis Nr. 4: Pielāgojiet elastīguma vērtības
Tā kā visiem lodziņiem ir iestatīta vērtība flex: 1;, vieta tiks vienmērīgi sadalīta visos trīs lodziņos. To var pārbaudīt, mainot pārlūkprogrammas loga lielumu.
5. solis: mainiet elastīguma īpašības
Ja vēlaties vēl precīzāk kontrolēt flex parametrus, varat, piemēram, noteiktiem lodziņiem iestatīt flex-grow: 0;. Tas nozīmē, ka šie lodziņi neaizņems papildu vietu, kad konteiners tiks paplašināts.
6. solis: Pielāgojiet flex-base
Kastēm, kuru pamatplatumu vēlaties iestatīt, varat izmantot flex-base: 50px;. Tas piešķirs lodziņam fiksētu platumu, un atlikušo vietu varēs elastīgi sadalīt starp citiem lodziņiem.
7. solis: Iestatiet boksu augstumu
Dažādiem lodziņiem varat iestatīt konkrētu augstumu, pielāgojot flex-basis. Piemēram, iestatiet flex-basis: 50px; augšējam lodziņam un flex-basis: 100px; apakšējam lodziņam.
8. solis: Pielāgojiet konteinera augstumu
Lai nodrošinātu, ka lodziņi attiecīgi pielāgojas, jāierobežo arī elastīgā konteinera augstums. Piemēram, iestatiet height: 400px;, lai centrālais lodziņš aizņemtu atlikušo vietu.
9. solis: optimizējiet izkārtojuma dizainu
Ja vēlaties vēl vairāk uzlabot izkārtojumu, varat pēc vajadzības pielāgot izkārtojuma elastīgā konteinera īpašības. Vienkārša justify-content vai align-items var būtiski mainīt izkārtojuma dizainu.
10. posms: Pārbaudiet responsīvo dizainu
Pārbaudiet, vai jūsu izkārtojums labi izskatās arī mobilajās ierīcēs. Izmantojiet pārlūkprogrammas izstrādātāja rīkus, lai izmēģinātu dažādus ekrāna izmērus un pārliecinātos, ka tas attiecīgi reaģē.
Apkopojums
Tagad esat iemācījušies izveidot un pielāgot elastīgu izkārtojumu, izmantojot Flexbox CSS un HTML. Pielāgojot flex vērtības un iestatot konkrētus augstumus un platumus, jūs varat viegli īstenot reaģējošu dizainu. Flexbox ievērojami vienkāršo visu procesu.
Biežāk uzdotie jautājumi
Kā darbojas Flexbox?Flexbox ir CSS modulis, kas nodrošina elastīgu izkārtojuma struktūru, kuru ir viegli pielāgot.
Kādas ir svarīgākās Flexbox īpašības?Svarīgākās īpašības ir display: flex;, flex-direction, flex-grow, flex-shrink un flex-base.
Kā padarīt savu izkārtojumu reaģējošu?Izmantojot procentuālās vērtības vai elastīgas vienības un pielāgojot elastīgās kastes īpašības, jūsu izkārtojumu var padarīt reaģējošu.
