Kā izmantot Flex, lai izlīdzinātu HTML elementus

CSS elastības rekvizīti ļauj pielāgot vienumus elastīgāk un atsaucīgāk. Tas padara to noderīgu, ja vēlaties, lai jūsu HTML elementi tīmekļa pārlūkprogrammā būtu atsaucīgāki.

Šajā rakstā ir aprakstīts, kā izmantot noteiktas elastības īpašības. Tas ietver elastības virziena, satura pamatojuma, līdzināšanas, vienumu līdzināšanas, satura līdzināšanas un atstarpes īpašības.

Kā iestatīt CSS Flex displeju

Struktūras piemērs, ko varat izmantot, lai izpētītu flexbox pamati ir pakārtotu divzīmju kopa zem viena vecāka div. Tālāk esošajā kodā ir galvenais "vecāku" div. Trīs pakārtotie elementi apzīmē vienumus, kurus varat līdzināt, izmantojot elastīgās īpašības.

Lai jebkurš elastīgs stils darbotos, jums būs jāpievieno displejs: flex īpašums vecākajam flex konteineram.

.parent {
 displejs: flex;
}

Bez flex, pakārtotie divi tiek parādīti viens pēc otra kolonnas formā lapas lejasdaļā.

Lai skatītu šīs iestatīšanas piemēru, skatiet un palaidiet kodu šajā CodePen fragments.

Kā kontrolēt izkārtojuma virzienu

The flex-virziens rekvizīts nosaka pakārtoto vienumu rindas vai kolonnas virzienu.

Flex-direction rekvizīta opcijas ietver:

flex-direction: rinda | kolonna | rinda-reverss | kolonna-reverss

Jums būs jāpievieno vecākkonteiners, kas aptver vienumus, kurus vēlaties līdzināt.

HTML:

CSS:

.red { background-color: red; }
.orange { fona krāsa: oranža; }
.yellow { fona krāsa: dzeltena; }
.green { fona krāsa: zaļa;}
.blue { fona krāsa: zila; }
.purple { fona krāsa: violeta; }
.parent div {
 platums: 40 pikseļi;
 augstums: 40 pikseļi;
}

Lietojiet elastības virziena rekvizītu vecākajam elastīgajam konteineram. Tādējādi tiks izlīdzināti pakārtotie div vienumi.

.parent {
 platums: 300 pikseļi;
 displejs: flex; 
 flex-direction: rinda;
}

Daudzas elastības īpašības attiecas uz galvenās ass un šķērsass jēdzienu. Kad flex-direction ir rinda, galvenā ass apzīmē horizontālo virzienu, bet šķērsass apzīmē vertikāli. Kolonnas vērtība pārslēdz šīs asis.

Skatiet flex-direction rekvizīta kodu šajā CodePen fragments lai redzētu dažus piemērus.

Kā izlīdzināt priekšmetus gar šķērsasi

The izlīdzināt vienumus rekvizīts kontrolē vienumu izlīdzināšanu gar šķērsasi. Noklusējuma elastīgajam virzienam rinda, līdzinātie vienumi kontrolē vienumu vertikālo līdzinājumu.

Rekvizīta align-items opcijas ir šādas:

izlīdzināt vienumus: flex-start | flex-end | izlīdzināt vienumus | stiept

Pievienojiet rekvizītu align-items vecākajam konteineram, lai līdzinātu tā pakārtotos.

.parent {
 displejs: flex; 
 align-itemes: flex-start;
}

Turklāt varat izvēlēties līdzināt vienumus, izmantojot bāzes līniju. Pēc noklusējuma bāzes līnijas opcija izlīdzina visus vienumus, pamatojoties uz vienumu pamatu.

Varat arī izvēlēties, no kurienes sākas bāzes līnija, piemēram, no augšas (pirmā bāzes līnija) vai apakšas (pēdējā bāzes līnija).

izlīdzināt vienumus: bāzes līnija | pirmā bāzes līnija | pēdējā bāzes līnija;

Vienumu izlīdzināšanai: bāzes līnija, lai darbotos, pārliecinieties, vai katram vienumam ir atšķirīgs augstums vai platums (atkarībā no izmantotās ass).

​​​

Skatiet rekvizīta align-items kodu šajā CodePen fragments lai redzētu dažus piemērus.

Kā ignorēt atsevišķu vienumu izlīdzināšanu

Jūs varat izmantot izlīdzināt-paši rekvizīts, lai ignorētu jebkuru vecākkonteinera līdzināšanas vienumu stilu. Tas nozīmē, ka atsevišķam vienumam varat iestatīt atsevišķu elastīgu līdzinājumu.

Izlīdzināšanas rekvizīta opcijas ietver:

align-self: auto | flex-start | flex-end | centrs | bāzes līnija | stiept

Pieņemsim, piemēram, ka vecākkonteinera elastīgā virziena stils ir iestatīts uz "rinda".

.parent {
 displejs: flex; 
 flex-direction: rinda;
}

Varat lietot līdzināšanas rekvizītu atsevišķam vienumam. Atsevišķam vienumam tiks izmantots rekvizīta align-self stils un vienums tiks centrēts vecākonteinerā.

Šajā sadaļā skatiet rekvizīta align-self kodu CodePen fragments lai redzētu dažus piemērus.

Kā sadalīt līnijas pāri šķērsasij

The līdzināt saturu Īpašums izlīdzina bērnus pa vertikālo asi. Tas var arī noteikt atstarpi starp vienumiem, kas atrodas vairākās rindās.

Satura līdzināšanas rekvizīta opcijas ir šādas:

align-content: flex-start | flex-end | centrs | stiept | atstarpe starp | telpa-ap

Pievienojiet rekvizītu align-content vecākajam elastīgajam konteineram. Rekvizīts align-content darbosies tikai tad, ja ir iestatīts flex-wrap rekvizīts. Pievienot flex-wrap: aptiniet vecākkonteinerā un samaziniet vecākkonteinera div platumu, lai vienumus uzspiestu vairāk nekā vienā rindā.

.parent {
 flex-wrap: wrap;
 displejs: flex;
 align-content: flex-start;
 platums: 180 pikseļi;
}

Šajā sadaļā skatiet rekvizīta align-content kodu CodePen fragments lai redzētu dažus piemērus.

Kā izlīdzināt vienumus uz galvenās ass

The attaisnot-saturs rekvizīts pievieno pakārtotajiem vienumiem labo, kreiso vai centrālo līdzinājumu. Tas arī izkliedē vienumus, pievienojot atstarpes starp tiem, pamatojot saturu.

Satura pamatojuma rekvizīta opcijas ietver:

attaisnot-saturs: flex-start | flex-end | centrs | atstarpe starp | telpa ap | telpa-vienmērīgi

Vienumus, kurus vēlaties līdzināt, ietiniet zem elastīgā vecāka konteinera.

HTML:

CSS:

.red { background-color: red; }
.green { fona krāsa: gaiši zaļa; }
.blue { fona krāsa: zila; }

Pievienojiet rekvizītu justify-content vecākajam elastīgajam konteineram.

.parent {
 platums: 300 pikseļi;
 displejs: flex; 
 attaisnot-saturs: flex-start;
}

Rekvizīts justify-content atbalsta arī CSS Box Alignment specifikācijā norādītās vērtības. Tas ietver tādas vērtības kā "sākums", "beigas", "pa kreisi" un "pa labi". Dažas pārlūkprogrammas to neatbalsta.

Īpašumam Justify-content ir arī atslēgvārds "drošs", ko varat izmantot. Tas nodrošina, ka elementi cenšas palikt vecākkonteinera diapazonā.

To izmanto arī, lai novērstu datu zudumu, ja centrējat garu vārdu. Drošā atslēgvārda izmantošana neļauj īsākam divam nogriezt pirmo un pēdējo burtu.

.parent {
 displejs: flex; 
 attaisnot-saturs: drošs centrs;
}

Drošais atslēgvārds ir pieejams arī noteiktām pārlūkprogrammām. Jūs varat pārbaudīt saderību vietnē Vai es varu izmantot.

Skatiet šajā rekvizīta justify-content kodu CodePen fragments lai redzētu dažus piemērus.

Kā pievienot atstarpi starp vienumiem

The plaisa Īpašums ļauj pievienot atstarpi starp vienumiem. Tas ir viens no jaunākas CSS funkcijas, kas var palīdzēt izveidot adaptīvu izkārtojumu.

Lietojiet spraugas rekvizītu vecākajam elastīgajam konteineram.

.parent {
 displejs: flex;
 atstarpe: 70 pikseļi;
}

Ja pievienosit atstarpi, kas liek vienumu garumam pārsniegt vecākvārda platumu, vienumi saruks, lai mēģinātu ietilpt rindā.

.parent { 
 platums: 300 pikseļi;
 atstarpe: 120 pikseļi;
}

Ja izmantojat flex-wrap: wrap, lai vienumus pārvietotu uz jaunu rindu, atstarpes lielums attieksies arī uz atstarpi starp rindām.

.parent { 
 platums: 300 pikseļi;
 flex-wrap: wrap;
 atstarpe: 120 pikseļi;
}

Turklāt jūs varat arī iestatīt rindu atstarpe un kolonna-sprauga īpašības. Atkal, jums tie būs jāpiemēro vecākajam elastīgajam konteineram.

Rindas atstarpes rekvizīts nosaka atstarpi starp katru rindu. Kolonnas atstarpes rekvizīts nosaka atstarpi starp katru kolonnu.

.parent { 
 rindu atstarpe: 120 pikseļi; 
}
.parent { 
 kolonnas atstarpe: 120 pikseļi; 
}

Skatiet atstarpes rekvizīta kodu šajā CodePen fragments lai redzētu dažus piemērus.

Vairāk Flex rekvizītu izmantošana savā vietnē

Cerams, ka tagad esat iepazinies ar dažādiem elastīguma rekvizītiem, ko varat izmantot, lai saskaņotu vienumus savā tīmekļa lapā. Tas ietver to, kā varat izmantot elastīgā virziena, satura pamatojuma, līdzināšanas, vienumu līdzināšanas, satura līdzināšanas un atstarpes rekvizītus.

Flexbox ir jaudīgs izkārtojuma paņēmiens, taču tā ir tikai neliela CSS daļa. Varat arī uzzināt par jauniem CSS rekvizītiem, tīrām kodēšanas metodēm un rīkiem, kas tiek izmantoti CSS optimizēšanai.

11 noderīgi rīki CSS failu pārbaudei, tīrīšanai un optimizēšanai

Lasiet Tālāk

Par autoru