Kaip naudoti „Flex“ HTML elementams suderinti

CSS lankstumo ypatybės leidžia lanksčiau ir reaguoti sulygiuoti elementus. Tai naudinga, kai norite, kad jūsų HTML elementai būtų labiau reaguoti žiniatinklio naršyklėje.

Šiame straipsnyje bus paaiškinta, kaip galite naudoti tam tikras lankstumo savybes. Tai apima lanksčios krypties, lygiavimo turinio, lygiavimo, elementų lygiavimo, turinio lygiavimo ir tarpų savybes.

Kaip nustatyti CSS Flex ekraną

Struktūros pavyzdys, kurį galite naudoti tyrinėdami „flexbox“ pagrindai yra antrinių div, esančių po vienišų tėvų div. Žemiau esančiame kode yra pagrindinis „parent“ div. Trys antriniai skyriai reiškia elementus, kuriuos galite lygiuoti naudodami lankstumo savybes.

Kad bet koks lankstus stilius veiktų, turėsite pridėti ekranas: lankstus nuosavybė į pirminį flex konteinerį.

.parent {
 ekranas: lankstus;
}

Be lankstumo, antriniai divai rodomi vienas po kito stulpelyje apačioje.

Norėdami peržiūrėti šios sąrankos pavyzdį, peržiūrėkite ir paleiskite kodą CodePen fragmentas.

Kaip valdyti išdėstymo kryptį

The lankstumo kryptis ypatybė nustato antrinių elementų eilutės arba stulpelio kryptį.

Lanksčios krypties nuosavybės parinktys apima:

lankstumo kryptis: eilutė | stulpelis | eilė-atvirkštinė | stulpelis-reversas

Turėsite pridėti pirminį sudėtinį rodinį, supantį elementus, kuriuos norite lygiuoti.

HTML:

CSS:

.red { fono spalva: raudona; }
.oranžinė { fono spalva: oranžinė; }
.yellow {fono spalva: geltona; }
.green {fono spalva: žalia;}
.blue {fono spalva: mėlyna; }
.purple {fono spalva: violetinė; }
.parent div {
 plotis: 40px;
 aukštis: 40px;
}

Pritaikykite lanksčios krypties ypatybę pirminiam lanksčiam konteineriui. Tai sulygiuos antrinius div elementus.

.parent {
 plotis: 300 pikselių;
 ekranas: lankstus; 
 lankstumo kryptis: eilė;
}

Daugelis lankstumo savybių yra susijusios su pagrindinės ašies ir skersinės ašies sąvokomis. Kai lankstumo kryptis yra eilė, pagrindinė ašis žymi horizontalią kryptį, o skersinė – vertikalią. Stulpelio reikšmė perjungia šias ašis.

Peržiūrėkite lanksčios krypties ypatybės kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip sulygiuoti elementus išilgai kryžminės ašies

The išlyginti elementus ypatybė valdo elementų išlygiavimą išilgai skersinės ašies. Numatytoji lankstumo kryptis, eilutė, lygiuoti elementus, valdo vertikalią elementų išlygiavimą.

Ypatybės sulygiuoti elementus parinktys apima:

suderinti elementus: flex-start | lankstus galas | sulyginti elementus | ištempti

Pridėkite ypatybę align-items prie pirminio sudėtinio rodinio, kad sulygiuotumėte jo antrinius elementus.

.parent {
 ekranas: lankstus; 
 align-items: flex-start;
}

Be to, galite pasirinkti lygiuoti elementus naudodami bazinę liniją. Pagal numatytuosius nustatymus pagrindinės linijos parinktis sulygiuoja visus elementus pagal elementų pagrindą.

Taip pat galite pasirinkti, nuo ko prasideda bazinė linija, pvz., viršuje (pirma bazinė linija) arba apačioje (paskutinė bazinė linija).

sulyginti elementus: bazinė linija | pirmoji bazinė linija | paskutinė bazinė linija;

Jei norite sulygiuoti elementus: pradinė linija, kad veiktų, įsitikinkite, kad kiekvieno elemento aukštis arba plotis skiriasi (atsižvelgiant į naudojamą ašį).

​​​

Peržiūrėkite čia esančios nuosavybės align-items kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip nepaisyti atskirų elementų lygiavimo

Galite naudoti lygiuotis-savaime ypatybę, kad būtų nepaisoma bet kokio pirminio sudėtinio rodinio lygiavimo elementų stiliaus. Tai reiškia, kad atskirame elemente galite nustatyti atskirą lanksčią išlygiavimą.

Sulygiavimo nuosavybės parinktys apima:

išlyginti save: automatinis | lankstus startas | lankstus galas | centras | pradinė linija | ištempti

Tarkime, kad pirminio sudėtinio rodinio lanksčios krypties stilius nustatytas į „eilutė“.

.parent {
 ekranas: lankstus; 
 lankstumo kryptis: eilė;
}

Sulygiavimo savybę galite pritaikyti atskiram elementui. Atskirame elemente bus naudojamas ypatybės lygiavimo stilius ir elementas bus sutelktas pirminiame sudėtiniame rodinyje.

Peržiūrėkite čia esančios align-self nuosavybės kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip paskirstyti linijas skersai

The suderinti turinį savybė išlygiuoja vaikus išilgai vertikalios ašies. Jis taip pat gali nustatyti tarpus tarp elementų, esančių keliose eilutėse.

Turinio lygiavimo nuosavybės parinktys:

suderinti turinį: flex-start | lankstus galas | centras | ruožas | tarpas tarp | erdvė aplinkui

Pridėkite ypatybę align-content į pirminį lanksčią sudėtinį rodinį. Ypatybė align-content veiks tik tuo atveju, jei nustatyta flex-wrap ypatybė. Pridėti „flex-wrap“: apvyniokite pirminį sudėtinį rodinį ir sumažinkite pirminio div plotį, kad elementai būtų įtraukti į daugiau nei vieną eilutę.

.parent {
 flex-wrap: įvyniojimas;
 ekranas: lankstus;
 align-content: flex-start;
 plotis: 180px;
}

Peržiūrėkite čia esančio turinio suderinimo nuosavybės kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip sulygiuoti elementus pagrindinėje ašyje

The pateisinti-turinys ypatybė prideda antrinių elementų lygiavimą dešinėje, kairėje arba centre. Ji taip pat paskirsto elementus, pridedant tarpus tarp jų, kai pateisina turinį.

Turinio pagrindimo nuosavybės parinktys apima:

pateisinti turinį: flex-start | lankstus galas | centras | tarpas tarp | erdvė aplinkui | erdvė-tolygiai

Elementus, kuriuos norite lygiuoti, apvyniokite po pirminiu lanksčiu konteineriu.

HTML:

CSS:

.red { fono spalva: raudona; }
.green {fono spalva: šviesiai žalia; }
.blue {fono spalva: mėlyna; }

Pridėkite ypatybę justify-content prie pirminio lanksčiojo sudėtinio rodinio.

.parent {
 plotis: 300 pikselių;
 ekranas: lankstus; 
 pateisinti-turinys: flex-start;
}

Ypatybė justify-content taip pat palaiko reikšmes, nurodytas CSS langelio lygiavimo specifikacijoje. Tai apima tokias reikšmes kaip „pradžia“, „pabaiga“, „kairėje“ ir „dešinėje“. Kai kurios naršyklės jų nepalaiko.

Turinio pagrindimo nuosavybė taip pat turi „saugus“ raktinį žodį, kurį galite naudoti. Taip užtikrinama, kad elementai bandytų likti pirminio sudėtinio rodinio diapazone.

Jis taip pat naudojamas siekiant išvengti duomenų praradimo tuo atveju, kai įtraukiate ilgą žodį. Naudojant saugų raktinį žodį, trumpesnė div raidė nenutraukia pirmos ir paskutinės raidės.

.parent {
 ekranas: lankstus; 
 pateisinti-turinys: saugus centras;
}

Saugus raktinis žodis taip pat taikomas tam tikroms naršyklėms. Suderinamumą galite patikrinti adresu Ar galiu naudoti.

Peržiūrėkite turinio pagrindimo nuosavybės kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Kaip pridėti tarpus tarp elementų

The tarpas savybė leidžia pridėti tarpą tarp elementų. Tai vienas iš naujesnių CSS funkcijų, kurios gali padėti sukurti interaktyvų išdėstymą.

Pritaikykite tarpo savybę pagrindiniam lanksčiam konteineriui.

.parent {
 ekranas: lankstus;
 tarpas: 70 pikselių;
}

Jei pridėsite tarpą, dėl kurio elementų ilgis viršija pirminio plotį, elementai susitrauks, kad tilptų eilutėje.

.parent { 
 plotis: 300 pikselių;
 tarpas: 120 taškų;
}

Jei naudojate lanksčią apvyniojimą: apvyniokite elementus, norėdami perkelti elementus į naują eilutę, tarpo dydis taip pat bus taikomas tarpui tarp eilučių.

.parent { 
 plotis: 300 pikselių;
 flex-wrap: įvyniojimas;
 tarpas: 120 taškų;
}

Be to, taip pat galite nustatyti tarpas tarp eilučių ir stulpelis-tarpelis savybių. Vėlgi, turėsite juos pritaikyti pagrindiniam lanksčiam konteineriui.

Eilučių tarpo ypatybė nustato tarpą tarp kiekvienos eilutės. Stulpelio tarpo ypatybė nustato tarpą tarp kiekvieno stulpelio.

.parent { 
 tarpas tarp eilučių: 120 taškų; 
}
.parent { 
 stulpelio tarpas: 120 pikselių; 
}

Peržiūrėkite čia esančio tarpo kodą CodePen fragmentas norėdami pamatyti keletą pavyzdžių.

Daugiau „Flex“ ypatybių naudojimas svetainėje

Tikimės, kad dabar esate susipažinę su įvairiomis lankstumo savybėmis, kurias galite naudoti norėdami lygiuoti elementus savo tinklalapyje. Tai apima, kaip galite naudoti lankstumo kryptį, išlyginti turinį, lygiuoti save, lygiuoti elementus, lygiuoti turinį ir tarpo savybes.

„Flexbox“ yra galinga išdėstymo technika, tačiau tai tik maža CSS dalis. Taip pat galite sužinoti apie naujas CSS ypatybes, švarius kodavimo būdus ir įrankius, naudojamus CSS optimizavimui.

11 naudingų įrankių CSS failams patikrinti, valyti ir optimizuoti

Skaitykite toliau

Apie autorių