Kuidas kasutada Flexi HTML-i elementide joondamiseks

CSS-i paindomadused võimaldavad teil üksusi paindlikumalt ja reageerivamalt joondada. See muudab selle kasulikuks, kui soovite, et teie HTML-elemendid reageeriksid veebibrauseris paremini.

Selles artiklis kirjeldatakse, kuidas saate teatud paindeomadusi kasutada. See hõlmab paindumissuuna, õigustatava sisu, joondamise, üksuste joondamise, sisu joondamise ja lünkade atribuute.

Kuidas seadistada CSS Flex Display

Struktuuri näide, mida saate uurida flexboxi põhitõed on alam-div-ide kogum üksikvanema div all. Allolevas koodis on peamine "vanem" div. Kolm alammärki tähistavad üksusi, mida saate painduvate atribuutide abil joondada.

Iga painduva stiili toimimiseks peate lisama ekraan: flex atribuut põhipaindkonteinerisse.

.parent {
 ekraan: flex;
}

Ilma paindumiseta kuvatakse alamdivid üksteise järel lehe allosas veerus.

Selle seadistuse näite vaatamiseks vaadake ja käivitage selles olev kood CodePeni katkend.

Kuidas juhtida paigutuse suunda

The painduv suund atribuut määrab alamüksuste rea või veeru suuna.

Paindliku suuna omaduse valikud hõlmavad järgmist:

painduv suund: rida | veerg | rida-tagurpidi | veerg-tagurpidi

Peate lisama ülemkonteineri, mis ümbritseb joondatavaid üksusi.

HTML:

CSS:

.red { taustavärv: punane; }
.orange { taustavärv: oranž; }
.kollane { taustavärv: kollane; }
.green { taustavärv: roheline;}
.blue { taustavärv: sinine; }
.purple { taustavärv: lilla; }
.parent div {
 laius: 40 pikslit;
 kõrgus: 40px;
}

Rakenda paindumissuuna atribuut emapaindkonteinerile. See joondab alamdiv-üksused.

.parent {
 laius: 300 pikslit;
 ekraan: flex; 
 painduv suund: rida;
}

Paljud paindeomadused viitavad peatelje ja risttelje mõistele. Kui paindesuund on rida, peatelg tähistab horisontaalset suunda ja risttelg vertikaali. Veeru väärtus vahetab neid telgi.

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

Kuidas joondada esemeid piki risttelge

The joondada-üksused atribuut juhib üksuste joondamist piki risttelge. Vaikimisi painduva suuna puhul juhib rida, joondusüksused üksuste vertikaalset joondamist.

Atribuudi joondusüksuste valikud hõlmavad järgmist:

joonda-elemendid: flex-start | painduv ots | joondada-üksused | venitada

Lisage emakonteinerisse atribuut align-items, et joondada selle alamkonteinerid.

.parent {
 ekraan: flex; 
 joondus-elemendid: flex-start;
}

Lisaks saate valida üksuste joondamise baasjoone abil. Vaikimisi joondab baasjoone suvand kõik üksused üksuste baasi alusel.

Samuti saate valida, kust lähtejoon algab, näiteks ülevalt (esimene baasjoon) või alt (viimane lähtejoon).

joonda-elemendid: baasjoon | esimene lähtetase | viimane baasjoon;

Joondatavate üksuste jaoks: tööks lähtejoon, veenduge, et igal üksusel oleks erinev kõrgus või laius (olenevalt kasutatavast teljest).

​​​

Vaadake selles atribuudi joondusüksuste koodi CodePeni katkend et näha mõnda näidet.

Kuidas tühistada üksikute üksuste joondamine

Saate kasutada joondus-ise atribuut emakonteineri mis tahes joondusüksuste stiili alistamiseks. See tähendab, et saate määrata üksikule elemendile eraldi paindejoonduse.

Ise joondamise atribuudi valikud hõlmavad järgmist:

joondus ise: auto | flex-start | painduv ots | keskus | baasjoon | venitada

Oletagem näiteks, et emakonteineri painduva suuna stiil on seatud väärtusele "rida".

.parent {
 ekraan: flex; 
 painduv suund: rida;
}

Saate rakendada joondus-ise atribuuti üksikule üksusele. Üksiküksus kasutab atribuudi joondus-ise stiili ja tsentreerib üksuse üle emakonteineri.

Vaadake selles atribuudi joondamise koodi CodePeni katkend et näha mõnda näidet.

Kuidas jaotada jooni üle risttelje

The joondada-sisu omadus joondab lapsed piki vertikaaltelge. See võib määrata ka vahekauguse mitmel real olevate üksuste vahel.

Sisu joondamise atribuudi valikud hõlmavad järgmist:

joondus-sisu: flex-start | painduv ots | keskus | venitada | tühik | ruumi ümber

Lisage atribuut align-content emapaindlikule konteinerile. Atribuut joondus sisu töötab ainult siis, kui atribuut flex-wrap on määratud. Lisage flex-wrap: mähkige põhikonteinerisse ja vähendage ülemkonteineri laiust, et sundida üksusi rohkem kui ühele reale.

.parent {
 flex-wrap: mähis;
 ekraan: flex;
 joondus-sisu: flex-start;
 laius: 180 pikslit;
}

Siit leiate atribuudi joondamise koodi CodePeni katkend et näha mõnda näidet.

Põhitelje üksuste joondamine

The õigustama-sisu atribuut lisab alamüksustele paremale, vasakule või keskele joonduse. Samuti hajutab see üksused laiali, lisades sisu põhjendamisel nende vahele tühikuid.

Sisu õigustatava atribuudi valikud hõlmavad järgmist:

õigusta-sisu: flex-start | painduv ots | keskus | tühik | ruumi ümber | ruumiliselt ühtlaselt

Mähige üksused, mida soovite joondada, painduva emakonteineri alla.

HTML:

CSS:

.red { taustavärv: punane; }
.green { taustavärv: heleroheline; }
.blue { taustavärv: sinine; }

Lisage põhipaindkonteinerisse atribuut Justify-content.

.parent {
 laius: 300 pikslit;
 ekraan: flex; 
 õigusta-sisu: flex-start;
}

Atribuut Justify-content toetab ka CSS-i kasti joondamise spetsifikatsioonis loetletud väärtusi. See hõlmab selliseid väärtusi nagu "start", "end", "left" ja "right". Mõned brauserid ei toeta neid.

Justify-content atribuudil on ka märksõna "turvaline", mida saate kasutada. See tagab, et elemendid püüavad jääda emakonteineri vahemikku.

Seda kasutatakse ka andmete kadumise vältimiseks juhul, kui tsentreerite pika sõna. Turvalise märksõna kasutamine takistab lühema div esimest ja viimast tähte ära lõikamast.

.parent {
 ekraan: flex; 
 õigusta-sisu: turvakeskus;
}

Turvaline märksõna on samuti piiratud teatud brauseritega. Ühilduvust saate kontrollida aadressil Kas ma võin kasutada.

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

Kuidas lisada üksuste vahele tühikuid

The lõhe atribuut võimaldab teil lisada üksuste vahele ruumi. See on üks uuemad CSS-i funktsioonid, mis aitavad teil luua tundliku paigutuse.

Rakendage atribuut tühimik emapaindlikule konteinerile.

.parent {
 ekraan: flex;
 vahe: 70 pikslit;
}

Kui lisate tühimiku, mis sunnib üksuste pikkust ületama vanema laiuse, kahanevad üksused, et proovida ja mahutada rea ​​sisse.

.parent { 
 laius: 300 pikslit;
 vahe: 120 pikslit;
}

Kui kasutate üksuste uuele reale lükkamiseks flex-wrap: wrap, rakendub vahe suurus ka ridadevahelisele ruumile.

.parent { 
 laius: 300 pikslit;
 flex-wrap: mähis;
 vahe: 120 pikslit;
}

Lisaks saate määrata ka reavahe ja veeru-vahe omadused. Jällegi peate need rakendama painduva emakonteineri jaoks.

Reavahe omadus määrab iga rea ​​vahelise ruumi. Veeruvahe atribuut määrab iga veeru vahelise ruumi.

.parent { 
 reavahe: 120 pikslit; 
}
.parent { 
 veeru vahe: 120 pikslit; 
}

Vaadake sellest tühimiku atribuudi koodi CodePeni katkend et näha mõnda näidet.

Rohkemate Flexi atribuutide kasutamine oma veebisaidil

Loodetavasti olete nüüd tuttav erinevate paindlike omadustega, mida saate oma veebilehel üksuste joondamiseks kasutada. See hõlmab seda, kuidas saate kasutada paindesuuna, sisu õigustamise, joondamise, üksuste joondamise, sisu joondamise ja lünkade atribuute.

Flexbox on võimas paigutustehnika, kuid see on vaid üks väike osa CSS-ist. Samuti saate teavet uute CSS-i atribuutide, puhaste kodeerimistehnikate ja CSS-i optimeerimiseks kasutatavate tööriistade kohta.

11 kasulikku tööriista CSS-failide kontrollimiseks, puhastamiseks ja optimeerimiseks

Loe edasi

Autori kohta