Kaip naudoti „Flex“, kad jūsų svetainė būtų jautresnė

Šiuolaikinis svetainių dizainas turi reaguoti į turinio ar naršyklės dydžio pokyčius. Tai galite pasiekti naudodami vanilla CSS, medijos užklausas arba „flexbox“.

Tam tikros lankstumo savybės, pvz., lankstumas arba lankstumas, gali pakeisti elemento dydį arba vietą vizualiai patraukliu būdu. Šiame straipsnyje bus pateikiami pavyzdžiai, kaip galite naudoti lankstaus augimo, lanksčiojo susitraukimo, lankstaus apvyniojimo, lankstaus srauto ir užsakymo lankstumo savybes.

Kaip nustatyti CSS Flex ekraną

Jei nesate susipažinę su „flexbox“ pagrindai, galite tai ištirti CodePen fragmentas. Jame yra paprastos „flexbox“ sąrankos pavyzdinis kodas. Pirmiausia antrinius elementus turėsite supakuoti po pirminiu div arba „flex konteineriu“.

<div klasė ="tėvas">
<div klasė ="vaikiškas daiktas"></div>
<div klasė ="vaikiškas daiktas"></div>
<div klasė ="vaikiškas daiktas"></div>
</div>

Pridėkite ekranas: lankstus nuosavybė tėvams div.

.tėvas {
 ekranas: lankstus;
}

Kaip auginti daiktus konteineryje

The lankstus augimas

ypatybė leidžia antriniams elementams išsiplėsti, kad užpildytų pirminiame div. Ši savybė leidžia nurodyti „santykį“ vietos, kurią gali užimti kiekvienas dėžutės elementas.

Norėdami pridėti flex-grow, pridėkite flex-grow CSS ypatybę prie kiekvieno antrinio elemento.

<div klasė ="tėvas">
<div stilius ="fono spalva: raudona; lankstus augimas: 1"></div>
<div stilius ="fono spalva: oranžinė; lankstus augimas: 1"></div>
<div stilius ="fono spalva: geltona; lankstus augimas: 1"></div>
<div stilius ="fono spalva: žalia; lankstus augimas: 3"></div>
<div stilius ="fono spalva: mėlyna; lankstus augimas: 1"></div>
</div>

.tėvas {
 plotis: 500 pikselių;
 ekranas: lankstus; 
}

Kiekvieno elemento lankstus augimas 0 reiškia, kad langeliai neišsiplės, kad užpildytų pirminės vietos vietą. 0 yra numatytoji šios nuosavybės reikšmė.

Lankstus augimas po 1 kiekvienam elementui privers visas dėžutes vienodai išsiplėsti, kad tilptų laisvos vietos pirminiame elemente.

Jei vienas iš elementų turėjo didesnį lankstumą, pavyzdžiui:

<div stilius ="fono spalva: žalia; lankstus augimas: 3"></div>

Žalias langelis bandys užimti iki trijų kartų daugiau vietos nei kiti langeliai.

Peržiūrėkite flex-grow nuosavybės kodą čia CodePen fragmentas pamatyti veikiantį pavyzdį.

Kaip sutraukti daiktus konteineryje

Kai kuriais atvejais pirminio elemento plotis gali sumažėti ir elementai, esantys pirminio elemento viduje, nebetilps. Galite naudoti lankstus-susitraukiantis savybė sumažinti dėžių dydį. Tokiu būdu jie gali likti tėvų viduje.

Flex-shrink leidžia nurodyti santykį, kiek kiekviena prekė turi susitraukti.

Pridėkite flex-srink savybę prie antrinių div elementų. Pakeiskite tėvų ir vaikų plotį, kad daiktai netilptų į konteinerį.

<div klasė ="tėvas">
<div stilius ="fono spalva: raudona; lankstus susitraukimas: 1"></div>
<div stilius ="fono spalva: oranžinė; lankstus susitraukimas: 1"></div>
<div stilius ="fono spalva: geltona; lankstus susitraukimas: 1"></div>
<div stilius ="fono spalva: žalia; lankstus susitraukimas: 2"></div>
<div stilius ="fono spalva: mėlyna; lankstus susitraukimas: 1"></div>
</div>

.tėvas {
 plotis: 500 pikselių;
 ekranas: lankstus; 
}
.tėvas div {
 plotis: 150 pikselių;
 aukštis: 150 pikselių;
}

Visų elementų lankstus susitraukimas 1 reiškia, kad visi elementai susitrauks vienodai, jei bus sumažintas pirminio plotis.

Jei vienas iš elementų turėjo didesnį lankstumą susitraukiantį, pavyzdžiui:

<div stilius ="fono spalva: žalia; lankstus susitraukimas: 2"></div>

Žalia dėžutė bandys susitraukti dvigubai daugiau nei kitos dėžutės.

Peržiūrėkite lankstaus susitraukimo ypatybės kodą CodePen fragmentas pamatyti veikiantį pavyzdį.

Kaip perkelti elementus į kitą eilutę

The lankstus įvyniojimas ypatybė leidžia perkelti elementus į kitą eilutę, jei jie netelpa pirminio sudėtinio rodinio plotyje. Čia daiktai nesusitraukia, o jūs galėsite išsaugoti daiktų aukštį ir plotį.

„Flex-wrap“ savybės parinktys apima:

lankstus įvyniojimas: be įvyniojimo | apvynioti | apvyniojimas-reversas

Pridėkite ypatybę „flex-wrap“ prie pagrindinio lankstaus sudėtinio rodinio. Įsitikinkite, kad konteinerio plotis yra pakankamai mažas, kad į jį netilptų vaikų daiktai. Taip visi perpildyti elementai bus perkelti į naują eilutę.

<div klasė ="tėvas">
<div klasė ="raudona"></div>
<div klasė ="oranžinė"></div>
<div klasė ="geltona"></div>
<div klasė ="žalias"></div>
<div klasė ="mėlyna"></div>
</div>

.tėvas {
 plotis: 300 pikselių;
 kraštinė: 1px vientisa juoda;
 ekranas: lankstus;
 flex-wrap: įvyniojimas;
}
.tėvas div {
 plotis: 100 pikselių;
 aukštis: 100 pikselių;
}

Apvyniojimo vertė nustatys elementus, pradedant viršutiniame dešiniajame konteinerio kampe. Apvyniojimo atvirkštinė vertė pakeis elementus, kad jie prasidėtų konteinerio apačioje, dešinėje. Suvyniojant elementus, elementai bus perkelti į naują eilutę aukščiau, o ne žemiau.

Jei nurodysite aukštį pirminiame sudėtiniame rodinyje, sudėtinis rodinys pridės tarpus tarp elementų eilučių.

Jei norite pašalinti šį tarpą, bet išlaikyti pirminio div aukštį, naudokite ypatybę align-content. Nurodykite align-content ypatybę kaip "flex-start" pirminiame div:

.tėvas { 
 plotis: 300 pikselių; 
 aukštis: 300 pikselių;
 kraštinė: 1px vientisa juoda; 
 ekranas: lankstus;
 flex-wrap: įvyniojimas; 
 suderinti-turinys: lankstus-pradėti;
}

Turinio suderinimo ypatybė yra viena iš kelių pagrindinių „flexbox“ ypatybės, leidžiančios valdyti lygiavimą.

Peržiūrėkite flex-wrap ypatybės kodą čia CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip perkelti elementus į kitą stulpelį

Jei naudojate kitą išdėstymą (pvz., stulpelį) ir jums vis tiek reikia apvynioti elementus, galite naudoti lankstus srautas nuosavybė. Ši lankstumo savybė yra lankstumo ir lankstumo krypties savybių derinys.

Pavyzdiniai parinkčių deriniai, kuriuos galite naudoti flex-flow nuosavybei, yra šie:

flex-wrap: eilutė be apvyniojimo | stulpelis nowrap | eilės apvyniojimas | kolonos apvyniojimas | eilutės apvyniojimas-atvirkštinis | stulpelio apvyniojimas-reversas

Ši savybė veikia panašiai kaip anksčiau pateikta lankstaus įvyniojimo savybė. Pridėkite „flex-flow“ į pagrindinį „flex“ konteinerį. Įsitikinkite, kad pirminio sudėtinio rodinio plotis yra pakankamai mažas, kad antriniai elementai būtų priversti suvynioti:

.tėvas {
 plotis: 300 pikselių; 
 kraštinė: 1px vientisa juoda; 
 ekranas: lankstus; 
 flex-flow: kolonėlės apvyniojimas;
}
.tėvas div {
 plotis: 100 pikselių;
 aukštis: 100 pikselių;
}

Elementai bus apvynioti nurodyta kryptimi (eilutė arba stulpelis).

Peržiūrėkite flex-flow ypatybės kodą čia CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip pakeisti prekių tvarką

Jei dėl bet kokių dinaminių duomenų reikėjo pertvarkyti puslapio elementus, galite naudoti įsakymas lankstumo savybė. Ši savybė leidžia nurodyti kiekvienos prekės rodymo tvarką.

Skaičiai nebūtinai turi prasidėti nuo 1. Galite naudoti bet kokius skaičius ir intervalus, o užsakymo ypatybė HTML elementus skirs nuo mažiausio iki didžiausio.

Pridėkite užsakymo ypatybę prie kiekvieno elemento pirminiame lanksčiame konteineryje:

<div klasė ="tėvas">
<div klasė ="raudona" stilius ="užsakymas: 2"></div>
<div klasė ="oranžinė" stilius ="užsakymas: 1"></div>
<div klasė ="geltona" stilius ="Užsakymas: 5"></div>
<div klasė ="žalias" stilius ="Užsakymas: 4"></div>
<div klasė ="mėlyna" stilius ="užsakymas: 3"></div>
</div>

Šiuo atveju oranžinė dėžutė bus dešinėje, po to raudona, mėlyna, žalia ir geltona.

Peržiūrėkite užsakymo nuosavybės kodą čia CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Eksperimentuokite su daugiau CSS ypatybių savo svetainėje

Galite naudoti šias lanksčios ypatybes, kad jūsų svetainė būtų interaktyvesnė. Tai apima lankstaus augimo, lankstaus susitraukimo, lankstaus įvyniojimo, lankstumo srauto ir lankstumo užsakymo savybių naudojimą.

Taip pat galite sužinoti apie daugiau lanksčių ypatybių, kurios padės suderinti HTML elementus savo svetainėje.

Kaip naudoti „Flex“ HTML elementams suderinti

Skaitykite toliau

Apie autorių