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

CSS: n flex-ominaisuuksien avulla voit kohdistaa kohteita joustavammin ja reagoivammin. Tämä tekee siitä hyödyllisen, kun haluat, että HTML-elementit reagoivat paremmin verkkoselaimen sisällä.

Tässä artikkelissa käydään läpi, kuinka voit käyttää tiettyjä jousto-ominaisuuksia. Tämä sisältää flex-direction-, justify-content-, align-self-, align-items-, align-content- ja gap-ominaisuudet.

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

Esimerkkirakenne, jota voit käyttää tutkimiseen flexboxin perusteet on joukko alatason div-merkkejä yhden vanhemman div: n alla. Alla olevassa koodissa on tärkein "emo"-div. Kolme alidiv-merkkiä edustavat kohteita, jotka voit kohdistaa käyttämällä flex-ominaisuuksia.

Jotta kaikki joustava muotoilu toimisi, sinun on lisättävä näyttö: flex ominaisuus ylätason joustosäiliöön.

.parent {
 näyttö: flex;
}

Ilman joustavuutta ali-div: t näkyvät peräkkäin sarakemuodostelmassa sivun alapuolella.

Jos haluat nähdä esimerkin tästä asetuksesta, tarkastele ja suorita koodi tässä CodePen-katkelma.

Asettelusuunnan hallinta

The flex-suunta ominaisuus määrittää alikohteiden rivin tai sarakkeen suunnan.

Flex-direction-ominaisuuden vaihtoehtoja ovat:

flex-direction: rivi | sarake | rivi-käänteinen | sarake-käänteinen

Sinun on lisättävä ylätason säilö niiden kohteiden ympärille, jotka haluat tasata.

HTML:

CSS:

.red { taustaväri: punainen; }
.oranssi { taustaväri: oranssi; }
.yellow { taustaväri: keltainen; }
.green { taustaväri: vihreä;}
.blue { taustaväri: sininen; }
.purple { taustaväri: violetti; }
.parent div {
 leveys: 40px;
 korkeus: 40px;
}

Käytä flex-direction-ominaisuutta ylätason flex-säilöön. Tämä tasaa alatason div-kohteet.

.parent {
 leveys: 300px;
 näyttö: flex; 
 flex-suunta: rivi;
}

Monet joustoominaisuudet viittaavat pääakselin ja poikkiakselin käsitteeseen. Kun flex-suunta on rivi, pääakseli edustaa vaakasuuntaa ja poikkiakseli pystysuoraa. Sarakkeen arvo vaihtaa nämä akselit.

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

Kohteiden kohdistaminen poikkiakselilla

The kohdista kohteet ominaisuus ohjaa kohteiden kohdistusta poikkiakselilla. Oletusarvon mukaisessa flex-suunnassa rivi, tasauskohteet ohjaa kohteiden pystysuuntaista tasausta.

Tasaa kohteet -ominaisuuden vaihtoehtoja ovat:

kohdista kohteet: flex-start | flex-end | kohdista kohteet | venyttää

Lisää align-items -ominaisuus ylätason säilöön tasataksesi sen alatason.

.parent {
 näyttö: flex; 
 tasauskohteet: flex-start;
}

Lisäksi voit kohdistaa kohteet perusviivan avulla. Oletusarvoisesti perusviiva-asetus tasaa kaikki kohteet kohteiden pohjan perusteella.

Voit myös valita, mistä perusviiva alkaa, kuten ylhäältä (ensimmäinen perusviiva) tai alhaalta (viimeinen lähtöviiva).

kohdista kohteet: perusviiva | ensimmäinen lähtötaso | viimeinen perusviiva;

Kohdistaa kohteita: perusviiva toimimaan, varmista, että jokaisella kohteella on eri korkeus tai leveys (riippuen käyttämästäsi akselista).

​​​

Katso align-items -ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Yksittäisten kohteiden kohdistuksen ohittaminen

Voit käyttää kohdistaa itsensä ominaisuus ohittaa kaikki ylätason säilön tasauskohteiden tyylit. Tämä tarkoittaa, että voit asettaa erillisen joustokohdistuksen yksittäiselle tuotteelle.

align-self-ominaisuuden vaihtoehtoja ovat:

kohdista itse: auto | flex-start | flex-end | keskus | perusviiva | venyttää

Oletetaan esimerkiksi, että pääsäilön flex-direction-tyyli on asetettu riviin.

.parent {
 näyttö: flex; 
 flex-suunta: rivi;
}

Voit käyttää align-self -ominaisuutta yksittäisessä tuotteessa. Yksittäinen kohde käyttää align-self -ominaisuuden tyyliä ja keskittää kohteen ylätason säilön poikki.

Katso align-self-ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Viivojen jakaminen poikkiakselin poikki

The kohdista-sisältö ominaisuus kohdistaa lapset pystyakselia pitkin. Se voi myös määrittää useilla riveillä olevien kohteiden väliset etäisyydet.

Kohdista sisältö -ominaisuuden vaihtoehtoja ovat:

align-content: flex-start | flex-end | keskus | venyttää | välilyönti | tilaa ympärillä

Lisää align-content-ominaisuus ylätason joustosäiliöön. align-content-ominaisuus toimii vain, jos flex-wrap-ominaisuus on asetettu. Lisää flex-wrap: wrap pääsäilöyn ja pienennä ylätason div: n leveyttä pakottaaksesi kohteet useammalle kuin yhdelle riville.

.parent {
 flex-wrap: kääri;
 näyttö: flex;
 align-content: flex-start;
 leveys: 180px;
}

Katso align-content -ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Kohteiden kohdistaminen pääakselilla

The perustele-sisältö ominaisuus lisää oikealle, vasemmalle tai keskelle tasauksen alikohteisiin. Se myös levittää kohteet lisäämällä niiden väliin välilyöntejä, kun sisältöä perustellaan.

Perusteltu sisältö -ominaisuuden vaihtoehtoja ovat:

perustella sisältö: flex-start | flex-end | keskus | välilyönti | tilaa ympärillä | tilaa tasaisesti

Kääri kohteet, jotka haluat kohdistaa, ylätason joustosäiliön alle.

HTML:

CSS:

.red { taustaväri: punainen; }
.green { taustaväri: vaaleanvihreä; }
.blue { taustaväri: sininen; }

Lisää justify-content-ominaisuus ylätason joustavaan säilöön.

.parent {
 leveys: 300px;
 näyttö: flex; 
 perustella-sisältö: flex-start;
}

Justify-content-ominaisuus tukee myös arvoja, jotka on lueteltu CSS Box Alignment -määrityksessä. Tämä sisältää arvot, kuten "alku", "loppu", "vasen" ja "oikea". Jotkut selaimet eivät tue näitä.

Justify-content -ominaisuudessa on myös "turvallinen" avainsana, jota voit käyttää. Tämä varmistaa, että elementit yrittävät pysyä ylätason säilön alueella.

Sitä käytetään myös estämään tietojen häviäminen siinä tapauksessa, että keskität pitkän sanan. Turva-avainsanan käyttäminen estää lyhyempää div-kirjainta leikkaamasta ensimmäistä ja viimeistä kirjainta.

.parent {
 näyttö: flex; 
 perustele-sisältö: turvallinen keskus;
}

Turvallinen avainsana on myös rajoitettu tiettyihin selaimiin. Voit tarkistaa yhteensopivuuden osoitteessa Voinko käyttää.

Katso perustelusisällön ominaisuuden koodi tästä CodePen-katkelma nähdäksesi joitain esimerkkejä.

Kuinka lisätä välilyöntejä kohteiden väliin

The aukko ominaisuuden avulla voit lisätä kohteiden väliin tilaa. Se on yksi niistä uudempia CSS-ominaisuuksia, jotka voivat auttaa sinua rakentamaan reagoivan asettelun.

Käytä väliominaisuutta ylätason joustosäiliöön.

.parent {
 näyttö: flex;
 väli: 70 pikseliä;
}

Jos lisäät raon, joka pakottaa kohteiden pituuden ylittämään ylätason leveyden, kohteet kutistuvat yrittääkseen mahtua rivin sisään.

.parent { 
 leveys: 300px;
 väli: 120 pikseliä;
}

Jos käytät flex-wrap: wrap -toimintoa työntämään kohteet uudelle riville, välin määrä koskee myös rivien välistä tilaa.

.parent { 
 leveys: 300px;
 flex-wrap: kääri;
 väli: 120 pikseliä;
}

Lisäksi voit myös asettaa riviväli ja pylväsväli ominaisuuksia. Jälleen sinun on käytettävä näitä ylätason joustosäiliössä.

Riviväli-ominaisuus määrittää jokaisen rivin välisen tilan. Sarakeväli-ominaisuus määrittää jokaisen sarakkeen välisen tilan.

.parent { 
 riviväli: 120 pikseliä; 
}
.parent { 
 sarakeväli: 120 pikseliä; 
}

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

Lisää Flex-ominaisuuksia verkkosivustollasi

Toivottavasti olet nyt tutustunut erilaisiin flex-ominaisuuksiin, joiden avulla voit kohdistaa kohteita verkkosivullasi. Tämä sisältää flex-direction-, tasaus-sisällön-, align-self-, align-items-, align-content- ja gap-ominaisuuksien käyttämisen.

Flexbox on tehokas asettelutekniikka, mutta se on vain yksi pieni osa CSS: ää. Voit myös oppia uusista CSS-ominaisuuksista, puhtaista koodaustekniikoista ja työkaluista, joita käytetään CSS-optimointiin.

11 hyödyllistä työkalua CSS-tiedostojen tarkistamiseen, puhdistamiseen ja optimointiin

Lue Seuraava

Kirjailijasta