Kā izmantot Flex, lai padarītu savu vietni atsaucīgāku

Mūsdienīgam vietņu dizainam ir jāreaģē uz satura vai pārlūkprogrammas izmēra izmaiņām. To var panākt, izmantojot vaniļas CSS, multivides vaicājumus vai flexbox.

Noteiktas elastības īpašības, piemēram, flex-wrap vai flex-grow, var vizuāli pievilcīgā veidā mainīt elementa izmēru vai atrašanās vietu. Šajā rakstā ir sniegti piemēri, kā izmantot elastīgās augšanas, elastīgās saraušanās, flex-wrap, flex-flow un pasūtīt flex īpašības.

Kā iestatīt CSS Flex displeju

Ja jūs neesat pazīstams ar flexbox pamati, varat to izpētīt CodePen fragments. Tajā ir iekļauts koda paraugs vienkāršai flexbox iestatīšanai. Pirmkārt, jums būs jāiesaiņo pakārtotie vienumi zem galvenā div vai "flex konteinera".

<div klase="vecāks">
<div klase="bērnu priekšmets"></div>
<div klase="bērnu priekšmets"></div>
<div klase="bērnu priekšmets"></div>
</div>

Pievienojiet displejs: flex īpašums vecākam div.

.vecāks {
 displejs: flex;
}

Kā audzēt priekšmetus konteinerā

The flex-augt rekvizīts ļauj pakārtotajiem vienumiem paplašināties, lai aizpildītu vietu, kas pieejama tā vecākdivi. Šis rekvizīts ļauj norādīt "attiecību" vietas daudzumu, ko katrs kastes vienums var aizņemt.

Lai pievienotu flex-grow, pievienojiet flex-grow CSS rekvizītu katram pakārtotajam vienumam.

<div klase="vecāks">
<div style="fona krāsa: sarkana; elastīga augšana: 1"></div>
<div style="fona krāsa: oranža; elastīga augšana: 1"></div>
<div style="fona krāsa: dzeltena; elastīga augšana: 1"></div>
<div style="fona krāsa: zaļa; elastīga augšana: 3"></div>
<div style="fona krāsa: zila; elastīga augšana: 1"></div>
</div>

.vecāks {
 platums: 500 pikseļi;
 displejs: flex; 
}

Katra vienuma elastīgā palielināšana — 0 nozīmē, ka kastes netiks paplašinātas, lai aizpildītu vietu, kur atrodas to vecāki. 0 ir šī īpašuma noklusējuma vērtība.

Katram vienumam pielāgojot 1, visas kastes liks vienādi izvērsties, lai tās ietilptu vecākajā pieejamajā vietā.

Piemēram, ja vienam no priekšmetiem ir lielāks izliekums:

<div style="fona krāsa: zaļa; elastīga augšana: 3"></div>

Zaļā kaste mēģinās iegūt līdz pat trīs reizes vairāk vietas nekā citas kastes.

Skatiet flex-grow rekvizīta kodu šajā CodePen fragments lai redzētu darba piemēru.

Kā samazināt priekšmetus konteinerā

Dažos gadījumos vecākvirsmas platums var sarukt, un elementi, kas atrodas vecākajā, vairs neietilpst. Jūs varat izmantot elastīga saraušanās īpašība samazināt kastu izmērus. Tādā veidā viņi var palikt vecāku iekšienē.

Flex-shrink ļauj norādīt attiecību, cik daudz katrai precei jāsaraujas.

Pievienojiet flex-shrink rekvizītu pakārtotajiem div vienumiem. Mainiet vecāku un bērnu platumus, lai priekšmeti neietilpst konteinerā.

<div klase="vecāks">
<div style="fona krāsa: sarkana; elastīga saraušanās: 1"></div>
<div style="fona krāsa: oranža; elastīga saraušanās: 1"></div>
<div style="fona krāsa: dzeltena; elastīga saraušanās: 1"></div>
<div style="fona krāsa: zaļa; elastīga saraušanās: 2"></div>
<div style="fona krāsa: zila; elastīga saraušanās: 1"></div>
</div>

.vecāks {
 platums: 500 pikseļi;
 displejs: flex; 
}
.vecāks div {
 platums: 150 pikseļi;
 augstums: 150 pikseļi;
}

Elastīgā saraušanās vērtība 1 visiem vienumiem nozīmē, ka visi vienumi saruks vienādi, ja tiks samazināts pamatplatums.

Piemēram, ja kādam no elementiem ir lielāks elastīgums, piemēram:

<div style="fona krāsa: zaļa; elastīga saraušanās: 2"></div>

Zaļā kaste mēģinās sarukt divreiz vairāk nekā pārējās kastes.

Skatiet elastīgā saraušanās rekvizīta kodu šajā CodePen fragments lai redzētu darba piemēru.

Kā pārvietot vienumus uz nākamo rindu

The flex-wrap rekvizīts ļauj pārvietot vienumus uz nākamo rindu, ja tie neietilpst vecākkonteinera platumā. Šeit preces nesaraujas, un jūs varēsiet saglabāt priekšmetu augstumu un platumu.

Flex-wrap rekvizīta opcijas ietver:

flex-wrap: nowrap | iesaiņojums | wrap-reverse

Pievienojiet flex-wrap rekvizītu vecākajam elastīgajam konteineram. Pārliecinieties, vai konteinera platums ir pietiekami mazs, lai tas neietilpst tajā esošajās bērnu lietās. Tādējādi visi pārpildītie vienumi tiks ievietoti jaunā rindā.

<div klase="vecāks">
<div klase="sarkans"></div>
<div klase="apelsīns"></div>
<div klase="dzeltens"></div>
<div klase="zaļš"></div>
<div klase="zils"></div>
</div>

.vecāks {
 platums: 300 pikseļi;
 apmale: 1px vienkrāsains melns;
 displejs: flex;
 flex-wrap: wrap;
}
.vecāks div {
 platums: 100 pikseļi;
 augstums: 100 pikseļi;
}

Iesaiņošanas vērtība izvietos vienumus, sākot no konteinera augšējās labās puses. Aptīšanas reversa vērtība pārvietos vienumus, sākot no konteinera apakšējās labās puses. Iesaiņojot vienumus, vienumi tiks pārvietoti jaunā rindā augšā, nevis zemāk.

Ja pamatkonteinerā norādāt augstumu, konteiners pievienos atstarpi starp vienumu rindām.

Ja vēlaties noņemt šo atstarpi, bet saglabāt vecākzīmes div augstumu, izmantojiet rekvizītu align-content. Norādiet align-content rekvizītu kā "flex-start" vecākajā div:

.vecāks { 
 platums: 300 pikseļi; 
 augstums: 300 pikseļi;
 apmale: 1px vienkrāsains melns; 
 displejs: flex;
 flex-wrap: wrap; 
 līdzināt-saturs: flex-sākt;
}

Satura līdzināšanas īpašums ir viens no vairākiem galvenajiem flexbox rekvizīti, kas ļauj kontrolēt līdzināšanu.

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

Kā pārvietot vienumus uz nākamo kolonnu

Ja izmantojat citu izkārtojumu (piemēram, kolonnu) un elementi joprojām ir jāietver, varat izmantot flex-flow īpašums. Šī elastības īpašība ir flex-wrap un flex-direction īpašību kombinācija.

Opciju kombināciju piemēri, ko varat izmantot flex-flow rekvizītam, ir:

flex-wrap: rinda nowrap | kolonna nowrap | rindu aptinums | kolonnu aptinums | rindas aplauzums-reverss | kolonnas aplauzums-reverss

Šis rekvizīts darbojas līdzīgi kā iepriekš minētais elastīgās ietīšanas rekvizīts. Pievienojiet flex-flow vecākajam flex konteineram. Pārliecinieties, ka galvenā konteinera platums ir pietiekami mazs, lai piespiestu ietīt pakārtotos vienumus:

.vecāks {
 platums: 300 pikseļi; 
 apmale: 1px vienkrāsains melns; 
 displejs: flex; 
 flex-flow: kolonnu aptinums;
}
.vecāks div {
 platums: 100 pikseļi;
 augstums: 100 pikseļi;
}

Vienumi tiks ietīti norādītajā virzienā (rinda vai kolonna).

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

Kā mainīt preču secību

Ja jums bija jāpārkārto lapas vienumi jebkāda veida dinamisku datu dēļ, varat izmantot pasūtījums flex īpašums. Šis rekvizīts ļauj norādīt katras preces parādīšanas secību.

Cipariem nav obligāti jāsākas no 1. Varat izmantot jebkurus skaitļus un intervālus, un pasūtījuma rekvizīts sakārtos HTML elementus no zemākā līdz augstākajam.

Pievienojiet pasūtījuma rekvizītu katrai precei vecākajā elastīgajā konteinerā:

<div klase="vecāks">
<div klase="sarkans" stils ="Pasūtījums: 2"></div>
<div klase="apelsīns" stils ="pasūtījums: 1"></div>
<div klase="dzeltens" stils ="Pasūtījums: 5"></div>
<div klase="zaļš" stils ="Pasūtījums: 4"></div>
<div klase="zils" stils ="Pasūtījums: 3"></div>
</div>

Šajā gadījumā oranžais lodziņš atradīsies galējā labajā pusē, kam sekos sarkanā, zilā, zaļā un pēc tam dzeltenā kaste.

Šeit skatiet pasūtījuma īpašuma kodu CodePen fragments lai redzētu dažus piemērus.

Eksperimentējiet ar vairāk CSS rekvizītu savā vietnē

Varat izmantot šos elastīgos rekvizītus, lai padarītu savu vietni adaptīvāku. Tas ietver flex-grow, flex-shrink, flex-wrap, flex-flow un order flex īpašību izmantošanu.

Varat arī uzzināt par citiem elastīgiem rekvizītiem, lai palīdzētu saskaņot HTML elementus savā vietnē.

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

Lasiet Tālāk

Par autoru