Flexbox CSS un HTML: konkrēts responsīvā dizaina piemērs

Šajā pamācībā es parādīšu, kā izmantot Flexbox CSS un HTML, lai izveidotu responsīvu izkārtojumu ar divām sānu joslām un galveno apgabalu. Flexbox ļauj elastīgi izvietot elementus, lai tie dinamiski pielāgotos ekrāna izmēram. Neatkarīgi no tā, vai vēlaties izveidot vienkāršu tīmekļa vietni vai sarežģītu dizainu, Flexbox tehnoloģija piedāvā daudz iespēju. Sāksim ar konkrētu piemēru!

Galvenie secinājumi

• Flexbox ļauj izveidot responsīvu izkārtojumu, kurā dažādi elementi ir vienmērīgi izvietoti pa pieejamo platumu.
• Flex īpašības nosaka, cik daudz vietas katrs elements aizņem attiecībā pret pārējiem.

Soli pa solim

1. solis: Izveidojiet pamata struktūru

Lai strādātu ar Flexbox, vispirms ir nepieciešama HTML pamatstruktūra. Izveidojiet HTML failu un pievienojiet pamata tagus, piemēram, , , un . Pēc tam pievienojiet tagiem konteineru elementus sānu joslām un galvenajam saturam.

Solis Nr. 2: Pievienojiet CSS, lai izveidotu izkārtojumu

Tagad jūs vēlaties pievienot izkārtojumam stilu, izmantojot CSS.

Solis Nr. 3: Aktivizējiet Flexbox

Lai aktivizētu Flexbox, konteineram piemēro īpašību display: flex;. Tādējādi tiešie konteinera bērni kļūs par elastīgiem elementiem. Iespējams, vēlaties iestatīt arī virzienu: Izmantojiet flex-direction: row; horizontālam izkārtojumam.

Solis Nr. 4: Nosakiet elastīgās īpašības bērniem

Pēc tam iestatiet elastīgās īpašības bērnu elementiem. Šeit varat noteikt, cik daudz vietas katram elementam jābūt attiecībā pret pārējiem elementiem. Piemēram, galvenajam elementam var noteikt flex: 2; un abiem sānjoslas elementiem flex: 1;, lai nodrošinātu, ka galvenais elements aizņem divreiz vairāk vietas nekā katra sānjosla.

Solis Nr. 5: Pielāgojiet responsīvo platumu

Lai nodrošinātu, ka jūsu izkārtojums ir arī responsīvs, ir nepieciešams iestatīt konteinera platumu: 100%;. Tas pielāgos izkārtojumu pārlūkprogrammas loga platumam. Izvēlieties arī augstumu, lai izkārtojuma skatus varētu optimizēt.

Solis Nr. 6: Nosakiet fiksētu platumu sānjoslām.

Ja vēlaties definēt sānjoslu ar fiksētu platumu, varat pievienot Flex izkārtojumam sānjoslas fiksēto platumu. Vienkārši noņemiet sānjoslas īpašību Flex, lai tā būtu tikai minimālā platuma.

7. posms: Turpmākie pielāgojumi un testi

Tagad jums jāpārbauda izkārtojums pārlūkprogrammā, lai pārliecinātos, ka viss izskatās pareizi. Eksperimentējiet ar dažādām flex vērtībām un platumiem, lai redzētu, kā izkārtojums reaģē. Pārlūkprogrammas logu mērogojiet, lai pārbaudītu dizaina reaģēšanas īpašības.

8. posms: Vertikālā izkārtojuma ieviešana

Pēc izvēles varat mainīt izkārtojumu, lai izveidotu vertikālu izkārtojumu. Lai to izdarītu, mainiet elastīgo konteineru uz kolonnu, izmantojot flex-direction: column;. Šis solis ir nepieciešams, ja vēlaties iegūt vairāk dizaina iespēju.

9. darbība: Pievienojiet pārlūkprogrammu atbalstu

Darba gaitā neaizmirstiet pārbaudīt pārlūkprogrammu atbalstu. Dažām vecākām pārlūkprogrammu versijām ir nepieciešami Flexbox prefiksi. Ja nepieciešams, pievienojiet atbilstošos prefiksus, lai nodrošinātu, ka jūsu izkārtojums visur izskatās labi.

10. posms: Veiciet galīgos pielāgojumus un saglabājiet

Pārbaudiet visus vadības elementus un pārliecinieties, ka izkārtojums izskatās labi dažādos ekrāna izmēros. Saglabājiet visas izmaiņas un uzņemiet izkārtojuma ekrānšāviņus, lai gūtu pārskatu par paveikto.

Kopsavilkums

Šajā rokasgrāmatā jūs uzzinājāt, kā izveidot vienkāršu, reaģējošu izkārtojumu ar Flexbox. Flex īpašības ļauj viegli kontrolēt elementu lielumu un izkārtojumu. Izmantojot iepriekš aprakstītās darbības, varat izveidot izkārtojumu ar divām sānu joslām un galveno apgabalu, kas eleganti pielāgojas dažādiem ekrāna izmēriem.