Kuinka tehdä sivustostasi reagoivampi Flexin avulla

Nykyaikaisten verkkosivujen suunnittelun tulee reagoida sisällön tai selaimen koon muutoksiin. Voit saavuttaa tämän käyttämällä vanilja-CSS: ää, mediakyselyitä tai flexboxia.

Tietyt joustoominaisuudet, kuten flex-wrap tai flex-grow, voivat muuttaa elementin kokoa tai sijaintia visuaalisesti houkuttelevalla tavalla. Tässä artikkelissa käydään läpi esimerkkejä siitä, kuinka voit käyttää flex-grow-, flex-shrink-, flex-wrap-, flex-flow- ja tilata flex-ominaisuuksia.

CSS Flex Display -näytön määrittäminen

Jos et tunne flexboxin perusteet, voit tutkia tätä CodePen-katkelma. Se sisältää esimerkkikoodin yksinkertaista flexbox-asennusta varten. Ensin sinun on käärittävä alikohteet ylätason div- tai "flex-säiliön" alle.

<div class="vanhempi">
<div class="lapsituote"></div>
<div class="lapsituote"></div>
<div class="lapsituote"></div>
</div>

Lisää näyttö: flex omaisuus vanhemmalle div.

.vanhempi {
 näyttö: flex;
}

Kuinka kasvattaa esineitä säiliössä

The flex-grow -ominaisuuden avulla alikohteet voivat laajentua täyttämään ylätason div. Tämän ominaisuuden avulla voit määrittää "suhteen" tilan, jonka kukin laatikon kohde voi viedä.

Lisää flex-grow lisäämällä flex-grow CSS-ominaisuus jokaiseen alikohteeseen.

<div class="vanhempi">
<div style="taustaväri: punainen; flex-grow: 1"></div>
<div style="taustaväri: oranssi; flex-grow: 1"></div>
<div style="taustaväri: keltainen; flex-grow: 1"></div>
<div style="taustaväri: vihreä; flex-grow: 3"></div>
<div style="taustaväri: sininen; flex-grow: 1"></div>
</div>

.vanhempi {
 leveys: 500px;
 näyttö: flex; 
}

Joustokasvu 0 jokaiselle tuotteelle tarkoittaa, että laatikot eivät laajene täyttämään vanhempiensa tilaa. 0 on tämän ominaisuuden oletusarvo.

Joustokasvu 1 jokaiselle esineelle pakottaa kaikki laatikot laajenemaan yhtä paljon, jotta ne mahtuvat ylätason sisällä olevaan tilaan.

Jos jollakin tuotteella oli suurempi joustokasvu, esimerkiksi:

<div style="taustaväri: vihreä; flex-grow: 3"></div>

Vihreä laatikko yrittää saada jopa kolme kertaa enemmän tilaa kuin muut laatikot.

Katso flex-grow-ominaisuuden koodi tästä CodePen-katkelma nähdä toimiva esimerkki.

Kuinka kutistaa esineitä säiliössä

Joissakin tapauksissa ylätason leveys saattaa kutistua ja ylätason sisällä olevat kohteet eivät enää mahdu sisälle. Voit käyttää joustava-kutistuva ominaisuus pienentää laatikoiden kokoa. Näin he voivat pysyä vanhemman sisällä.

Flex-shrink-toiminnolla voit määrittää suhteen, kuinka paljon kunkin tuotteen tulee kutistua.

Lisää flex-shrink -ominaisuus alidiv-alkioihin. Muuta vanhemman ja lasten leveyksiä niin, että tavarat eivät mahdu säiliöön.

<div class="vanhempi">
<div style="taustaväri: punainen; joustokutistuva: 1"></div>
<div style="taustaväri: oranssi; joustokutistuva: 1"></div>
<div style="taustaväri: keltainen; joustokutistuva: 1"></div>
<div style="taustaväri: vihreä; joustokutistuva: 2"></div>
<div style="taustaväri: sininen; joustokutistuva: 1"></div>
</div>

.vanhempi {
 leveys: 500px;
 näyttö: flex; 
}
.vanhempi div {
 leveys: 150 pikseliä;
 korkeus: 150px;
}

Joustokutistuminen 1 kaikille kohteille tarkoittaa, että kaikki kohteet kutistuvat tasaisesti, jos ylätason leveyttä pienennetään.

Jos jollakin tuotteella on suurempi joustokutistus, esimerkiksi:

<div style="taustaväri: vihreä; joustokutistuva: 2"></div>

Vihreä laatikko yrittää kutistua kaksi kertaa niin paljon kuin muut laatikot.

Katso flex-shrink -ominaisuuden koodi tästä CodePen-katkelma nähdä toimiva esimerkki.

Kohteiden siirtäminen seuraavalle riville

The flex-wrap ominaisuuden avulla voit siirtää kohteita seuraavalle riville, jos ne eivät mahdu ylätason säilön leveyteen. Täällä esineet eivät kutistu, vaan pystyt säilyttämään esineiden korkeuden ja leveyden.

Flex-wrap-ominaisuuden vaihtoehtoja ovat:

flex-wrap: nowrap | kääri | kääri-käänteinen

Lisää flex-wrap-ominaisuus ylätason flex-säilöön. Varmista, että säiliön leveys on riittävän pieni, jotta se ei mahdu lasten esineisiin. Tämä pakottaa kaikki ylivuotetut kohteet uudelle riville.

<div class="vanhempi">
<div class="punainen"></div>
<div class="oranssi"></div>
<div class="keltainen"></div>
<div class="vihreä"></div>
<div class="sininen"></div>
</div>

.vanhempi {
 leveys: 300px;
 reuna: 1px tasainen musta;
 näyttö: flex;
 flex-wrap: kääri;
}
.vanhempi div {
 leveys: 100 pikseliä;
 korkeus: 100px;
}

Rivitysarvo sijoittaa kohteet alkaen säilön oikeasta yläkulmasta. Käärimisen käänteinen arvo siirtää kohteet siten, että ne alkavat säiliön oikeasta alakulmasta. Kun kohteita kääritään, se työntää tuotteet uudelle riville yläpuolelle eikä alapuolelle.

Jos määrität ylätason säilölle korkeuden, säilö lisää välilyönnit kohterivien väliin.

Jos haluat poistaa tämän välin, mutta säilyttää ylätason div: n korkeuden, käytä align-content -ominaisuutta. Määritä align-content-ominaisuuden arvoksi "flex-start" ylätason div: ssä:

.vanhempi { 
 leveys: 300px; 
 korkeus: 300px;
 reuna: 1px tasainen musta; 
 näyttö: flex;
 flex-wrap: kääri; 
 kohdista-sisältö: flex-alkaa;
}

Tasaa sisällön ominaisuus on yksi useista ytimistä flexbox-ominaisuudet, joiden avulla voit hallita kohdistusta.

Katso flex-wrap-ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Kohteiden työntäminen seuraavaan sarakkeeseen

Jos käytät toista asettelua (kuten saraketta) ja tarvitset silti elementit rivitettäväksi, voit käyttää flex-flow omaisuutta. Tämä flex-ominaisuus on yhdistelmä flex-wrap- ja flex-direction-ominaisuuksia.

Esimerkkejä vaihtoehtoyhdistelmistä, joita voit käyttää flex-flow-ominaisuuteen, ovat:

flex-wrap: rivi nowrap | sarake nowrap | rivien rivitys | sarakkeen kääre | rivin rivitys-käänteinen | sarakkeen rivitys-käänteinen

Tämä ominaisuus toimii samalla tavalla kuin yllä oleva flex-wrap-ominaisuus. Lisää flex-flow emo-flex-säiliöön. Varmista, että ylätason säilön leveys on tarpeeksi pieni pakottaaksesi alatason kohteet käärimään:

.vanhempi {
 leveys: 300px; 
 reuna: 1px tasainen musta; 
 näyttö: flex; 
 flex-flow: pylväskääre;
}
.vanhempi div {
 leveys: 100 pikseliä;
 korkeus: 100px;
}

Kohteet rivittyvät määritettyyn suuntaan (rivi tai sarake).

Katso flex-flow-ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Kuinka muuttaa tuotteiden järjestystä

Jos joudut järjestämään sivun kohteet uudelleen minkä tahansa dynaamisten tietojen vuoksi, voit käyttää Tilaus flex-ominaisuus. Tämän ominaisuuden avulla voit määrittää järjestyksen, jossa jokainen nimike näkyy.

Numeroiden ei välttämättä tarvitse alkaa yhdestä. Voit käyttää mitä tahansa numeroita ja intervalleja, ja järjestysominaisuus järjestää HTML-elementit pienimmästä suurimpaan.

Lisää tilausominaisuus kuhunkin tuotteeseen pääjoustosäiliön sisällä:

<div class="vanhempi">
<div class="punainen" tyyli ="tilaus: 2"></div>
<div class="oranssi" tyyli ="tilaus: 1"></div>
<div class="keltainen" tyyli ="tilaus: 5"></div>
<div class="vihreä" tyyli ="tilaus: 4"></div>
<div class="sininen" tyyli ="tilaus: 3"></div>
</div>

Tässä tapauksessa oranssi laatikko on äärimmäisenä oikealla, jota seuraa punainen, sininen, vihreä ja sitten keltainen ruutu.

Katso tilausomaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Kokeile lisää CSS-ominaisuuksia verkkosivustollasi

Näiden flex-ominaisuuksien avulla voit tehdä verkkosivustostasi reagoivamman. Tämä sisältää flex-grow-, flex-shrink-, flex-wrap-, flex-flow- ja order flex -ominaisuuksien käyttämisen.

Voit myös oppia lisää flex-ominaisuuksista, joiden avulla voit kohdistaa verkkosivustosi HTML-elementit.

Kuinka käyttää Flexiä HTML-elementtien kohdistamiseen

Lue Seuraava

Kirjailijasta