Kuidas Flexi kasutada oma veebisaidi tundlikumaks muutmiseks

Kaasaegsed veebisaitide kujundused peavad reageerima sisu või brauseri suuruse muutustele. Seda saate saavutada vanilje CSS-i, meediumipäringute või flexboxi abil.

Teatud paindumisomadused, nagu flex-wrap või flex-grow, võivad muuta elemendi suurust või asukohta visuaalselt atraktiivsel viisil. Selles artiklis käsitletakse näiteid selle kohta, kuidas saate kasutada painduva kasvu, painduva kahanemise, painduva mähkimise, paindevoolu ja tellimisomadusi.

Kuidas seadistada CSS Flex Display

Kui sa pole tuttav flexboxi põhitõed, saate seda uurida CodePeni katkend. See sisaldab lihtsa flexboxi seadistamise näidiskoodi. Esiteks peate alamüksused pakkima ülem-div või "flex konteineri" alla.

<div klass="lapsevanem">
<div klass="laps-ese"></div>
<div klass="laps-ese"></div>
<div klass="laps-ese"></div>
</div>

Lisage ekraan: flex vara vanemale div.

.lapsevanem {
 ekraan: flex;
}

Kuidas konteineris esemeid kasvatada

The painduvad-kasvad atribuut võimaldab alamüksusi laiendada, et täita ülemdivisjonis saadaolev ruum. See atribuut võimaldab teil määrata ruumi "suhte", mille iga kastiüksus võib võtta.

Paindliku kasvu lisamiseks lisage igale alamüksusele CSS-i atribuut flex-grow.

<div klass="lapsevanem">
<div style="taustavärv: punane; paindlik kasv: 1"></div>
<div style="taustavärv: oranž; paindlik kasv: 1"></div>
<div style="taustavärv: kollane; paindlik kasv: 1"></div>
<div style="taustavärv: roheline; paindlik kasv: 3"></div>
<div style="taustavärv: sinine; paindlik kasv: 1"></div>
</div>

.lapsevanem {
 laius: 500 pikslit;
 ekraan: flex; 
}

Iga üksuse painduv kasv 0 tähendab, et kastid ei laiene, et täita oma vanema ruumi. 0 on selle atribuudi vaikeväärtus.

Paindlik kasv 1 iga üksuse jaoks sunnib kõiki lahtreid võrdselt laienema, et need mahuksid vanemas oleva vaba ruumi.

Kui ühel esemel on suurem paindumine, näiteks:

<div style="taustavärv: roheline; paindlik kasv: 3"></div>

Roheline kast püüab saada kuni kolm korda rohkem ruumi kui teised kastid.

Vaadake sellest flex-grow atribuudi koodi CodePeni katkend et näha töötavat näidet.

Kuidas konteineris olevaid esemeid kokku tõmmata

Mõnel juhul võib vanema laius kahaneda ja vanema sees olevad üksused ei mahu enam sisse. Saate kasutada painduv-kahanev omadus kastide suurust kahandada. Nii saavad nad vanema sees kinni hoida.

Flex-shrink võimaldab teil määrata suhte, kui palju iga üksus peaks kokku tõmbuma.

Lisage alamüksustele atribuut flex-shrink. Muutke vanema ja laste laiusi, et esemed konteinerisse ei mahuks.

<div klass="lapsevanem">
<div style="taustavärv: punane; painduv kokkutõmbumine: 1"></div>
<div style="taustavärv: oranž; painduv kokkutõmbumine: 1"></div>
<div style="taustavärv: kollane; painduv kokkutõmbumine: 1"></div>
<div style="taustavärv: roheline; painduv kokkutõmbumine: 2"></div>
<div style="taustavärv: sinine; painduv kokkutõmbumine: 1"></div>
</div>

.lapsevanem {
 laius: 500 pikslit;
 ekraan: flex; 
}
.lapsevanem div {
 laius: 150 pikslit;
 kõrgus: 150 pikslit;
}

Kõigi üksuste paindkahanemine 1 tähendab, et kõik elemendid kahanevad võrdselt, kui vanema laiust vähendatakse.

Kui ühel esemel on suurem painduv kokkutõmbumine, näiteks:

<div style="taustavärv: roheline; painduv kokkutõmbumine: 2"></div>

Roheline kast püüab kahaneda kaks korda rohkem kui teised kastid.

Vaadake sellest painduva kahanemise atribuudi koodi CodePeni katkend et näha töötavat näidet.

Kuidas lükata üksused järgmisele reale

The flex-wrap atribuut võimaldab lükata üksused järgmisele reale, kui need ei mahu emakonteineri laiusesse. Siin ei kahane esemed ning saate säilitada esemete kõrguse ja laiuse.

Flex-wrap atribuudi valikud hõlmavad järgmist:

flex-wrap: nowrap | mähis | mähis-tagurpidi

Lisage flex-wrap atribuut painduva põhikonteinerisse. Veenduge, et anuma laius oleks piisavalt väike, nii et see ei mahuks sellesse lapsetarbeid. See sunnib kõik ületäitunud üksused uuele reale.

<div klass="lapsevanem">
<div klass="punane"></div>
<div klass="oranž"></div>
<div klass="kollane"></div>
<div klass="roheline"></div>
<div klass="sinine"></div>
</div>

.lapsevanem {
 laius: 300 pikslit;
 ääris: 1px täismust;
 ekraan: flex;
 flex-wrap: mähis;
}
.lapsevanem div {
 laius: 100 pikslit;
 kõrgus: 100 pikslit;
}

Ümbrise väärtus asetab üksused alates konteineri paremast ülanurgast. Ümbris-tagurpidi väärtus asetab elemendid ümber, alustades konteineri paremast alanurgast. Üksuste mähkimisel lükatakse üksused alla, mitte üleval, uuele reale.

Kui määrate emakonteineri kõrguse, lisab konteiner üksuste ridade vahele tühimiku.

Kui soovite selle tühiku eemaldada, kuid säilitada vanema div kõrguse, kasutage atribuuti align-content. Määrake atribuut align-content kui "flex-start" emaüksuses:

.lapsevanem { 
 laius: 300 pikslit; 
 kõrgus: 300 pikslit;
 ääris: 1px täismust; 
 ekraan: flex;
 flex-wrap: mähis; 
 joondus-sisu: painduv-alustada;
}

Joondamissisu atribuut on üks mitmest tuumast flexboxi atribuudid, mis võimaldavad teil joondamist juhtida.

Vaadake sellest flex-wrap atribuudi koodi CodePeni katkend et näha mõnda näidet.

Kuidas lükata üksused järgmisse veergu

Kui kasutate teistsugust paigutust (nt veergu) ja vajate siiski elemente mähkimiseks, võite kasutada flex-flow vara. See paindumisomadus on kombinatsioon paindumis- ja paindesuuna omadustest.

Näidisvalikute kombinatsioonid, mida saate flex-flow atribuudi jaoks kasutada, on järgmised:

flex-wrap: rida nowrap | veerg nowrap | rea mähis | veeru mähis | rea murdmine-tagurpidi | veeru ümbris-tagurpidi

See omadus toimib sarnaselt ülaltoodud painduva mähise omadusega. Lisage flex-flow põhipaindumahutisse. Veenduge, et põhiümbrise laius oleks piisavalt väike, et sundida alamüksusi pakkima:

.lapsevanem {
 laius: 300 pikslit; 
 ääris: 1px täismust; 
 ekraan: flex; 
 flex-flow: kolonni mähis;
}
.lapsevanem div {
 laius: 100 pikslit;
 kõrgus: 100 pikslit;
}

Üksused mähitakse määratud suunas (rida või veerg).

Vaadake sellest flex-flow atribuudi koodi CodePeni katkend et näha mõnda näidet.

Kuidas muuta kaupade järjekorda

Kui teil oli vaja dünaamiliste andmete tõttu lehel üksusi ümber korraldada, saate kasutada tellida painduv omadus. See atribuut võimaldab teil määrata iga kauba kuvamisjärjestuse.

Numbrid ei pea tingimata algama 1-st. Võite kasutada mis tahes numbreid ja intervalle ning järjestusatribuut järjestab HTML-i elemendid madalaimast kõrgeimani.

Lisage tellimuse atribuut igale paindlikus emakonteineri üksusele:

<div klass="lapsevanem">
<div klass="punane" stiil="tellimus: 2"></div>
<div klass="oranž" stiil="tellimus: 1"></div>
<div klass="kollane" stiil="tellimus: 5"></div>
<div klass="roheline" stiil="tellimus: 4"></div>
<div klass="sinine" stiil="tellimus: 3"></div>
</div>

Sel juhul on kõige parempoolsem oranž kast, millele järgneb punane, sinine, roheline ja seejärel kollane kast.

Vaadake siit tellimuse atribuudi koodi CodePeni katkend et näha mõnda näidet.

Katsetage oma veebisaidil rohkemate CSS-i atribuutidega

Saate kasutada neid paindlikke atribuute oma veebisaidi tundlikumaks muutmiseks. See hõlmab flex-grow, flex-shrink, flex-wrap, flex-flow ja order flex omaduste kasutamist.

Lisateavet leiate ka paindlikumate atribuutide kohta, mis aitavad teil oma veebisaidi HTML-elemente joondada.

Kuidas kasutada Flexi HTML-i elementide joondamiseks

Loe edasi

Autori kohta