Flexbox гэж юу вэ? Бүх CSS шинж чанаруудын тодорхойлолт, үндсэн зарчим, давуу болон сул талууд. Flexbox Flex дээрх ашигтай холбоосуудтай ажиллахад хэрэгтэй зарим жишээ
Flexbox-ууд нь "Ариун Grail" гэж нэрлэгддэг гурван багана гэх мэт түгээмэл хэрэглэгддэг вэбсайтын бүдүүвчийг үүсгэхэд тохиромжтой бөгөөд бүх баганууд нь агуулгаас үл хамааран бүтэн өндөр байх ёстой. Үүний зэрэгцээ, эх кодонд үндсэн агуулга нь навигацийн өмнө, хуудасны өөрөө үндсэн агуулга нь навигацийн дараа ирдэг.
Үүн шиг.
Flexbox-оос өмнө зарим хакеруудыг ашиглахгүйгээр энэ зохион байгуулалтад хүрэхэд нэлээд хэцүү байсан. Хөгжүүлэгчид контентын хэмжээ, дэлгэцийн хэмжээ зэргээс үл хамааран бүх зүйлийг зөв байрлуулахын тулд нэмэлт тэмдэглэгээ хийх, сөрөг зай хэрэглэх болон бусад заль мэх хийх шаардлагатай болдог. Гэхдээ дээрх жишээнээс харахад Flexbox дээр бүх зүйл илүү хялбар болсон.
Кодын хураангуйг энд оруулав. Энэ жишээн дээр бид #main элементийг уян хатан контейнер болгож, толгой ба хөлийг блок элемент болгон үлдээсэн. Өөрөөр хэлбэл, зөвхөн дунд хэсэг нь flexbox болдог. Үүнийг уян хатан сав болгосон хэсэг энд байна.
#main (дэлгэц: уян хатан; мин-өндөр: calc(100vh - 40vh); )
Флекс савыг хийхийн тулд зөвхөн display: flex-ийг ашигла. Мөн бид calc() функцийг ашиглан min-height-ийг тохируулж, #main-г харах талбайн өндрийн 100% болгож тохируулсан болохыг анхаарна уу. хасахтолгой ба суурийн өндөр (тус бүр 20vh). Энэ нь бага агуулгатай байсан ч зураглал нь дэлгэцийн өндрийг бүхэлд нь дүүргэхийг баталгаажуулдаг. Үүний үр дүнд, контент нь дэлгэцийн өндрөөс бага эзэлдэг бол хөл хэсэг нь хэзээ ч дээшлэхгүй бөгөөд доор нь хоосон зай үлдээхгүй.
Бид бүх элементүүдэд box-sizing: border-box-ыг ашигласан тул мин-өндөрийг тооцоолох нь маш энгийн байсан. Хэрэв бид үүнийг хийгээгүй бол бид нэмэх хэрэгтэй болно дүүргэх утгахасах дүн хүртэл.
Флекс савыг суулгасны дараа бид уян хатан элементүүдтэй харьцдаг.
#main > нийтлэл ( flex: 1; ) #main > nav, #main > aside ( flex: 0 0 20vw; background: beige; ) #main > nav ( дараалал: -1; )
Флекс шинж чанар нь уян хатан, уян хатан, уян хатан шинж чанаруудын товчлол юм. Эхний тохиолдолд бид зөвхөн нэг утгыг бичсэн тул flex нь flex-grow шинж чанарыг тохируулдаг. Хоёр дахь тохиолдолд бид бүх гурван утгыг бичсэн
Энэ нийтлэлд бид вэб хуудасны уян хатан байрлалыг бий болгоход зориулагдсан CSS Flexbox технологийг танилцуулах болно.
CSS Flexbox-ийн зорилго
CSS Flexbox нь зориулагдсан уян хатан зохион байгуулалтыг бий болгох. Энэхүү технологийг ашигласнаар та элементүүдийг саванд маш энгийн бөгөөд уян хатан байдлаар байрлуулж, тэдгээрийн хооронд байгаа зайг хуваарилж, тодорхой хэмжээсгүй байсан ч нэг аргаар эсвэл өөр байдлаар зэрэгцүүлж болно.
CSS Flexbox нь Float болон байршлыг ашиглахаас хамаагүй хялбар мэдрэмжтэй дизайн үүсгэх боломжийг олгодог.
Flexbox нь бүх хуудасны CSS тэмдэглэгээ болон түүний тусдаа блокуудын аль алинд нь ашиглагдаж болно.
CSS Flexbox-т зориулсан хөтөчийн дэмжлэг
CSS Flexbox нь одоо ашиглагдаж байгаа орчин үеийн бүх хөтчүүдээр дэмжигддэг (угтваруудыг ашиглан: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+). .
CSS Flexbox үндсүүд
Flexbox ашиглан CSS тэмдэглэгээг үүсгэх нь шаардлагатай HTML элементийн CSS дэлгэцийн шинж чанарыг flex эсвэл flex-inline болгон тохируулахаас эхэлдэг.
Үүний дараа энэ элемент нь уян хатан сав болж, түүний бүх зүйл болно шуудхүүхэд элементүүд нь уян хатан элементүүд юм. Түүнээс гадна, бид flexbox-ийн тухай ярихдаа зөвхөн display:flex эсвэл display:flex-inline болон бүх элементүүдтэй элементийг хэлнэ. шууддотор нь байрладаг. Тиймээс CSS Flexbox-д зөвхөн хоёр төрлийн элемент байдаг: уян хатан контейнер ба уян элемент.
Ихэнх хөтчүүдийн байршлыг дэмжихийн тулд угтвар болон хамгийн их өргөний шинж чанаруудыг CSS-д нэмсэн.
Блокыг уян хатан сав болгон "эргэх" тулд эгнээний ангиллыг ашиглана уу. Flex контейнер доторх .col__article болон .col__aside уян хатан элементүүдийн өргөнийг тохируулах нь flex CSS шинж чанарыг ашиглан хийгддэг.
Жишээлбэл, flexbox ашиглан өөр хөлийг тэмдэглэж, .col__article элементэд гурван элементээс бүрдэх блок үүсгэцгээе (нэг элементийн хамгийн бага өргөн нь 300px). Бид хөл хэсэгт дөрвөн блок байрлуулна (нэг блокийн хамгийн бага өргөн нь 200px).
Би FlexBox-ийн талаар ярихыг хүсч байна. Flexbox байршлын модуль (уян хатан хайрцаг, одоогоор W3C нэр дэвшигчийн зөвлөмж) нь хэмжээ нь тодорхойгүй ба/эсвэл динамик (тиймээс энэ үг) байсан ч савны элементүүдийн хоорондын зайг байрлуулах, зэрэгцүүлэх, хуваарилах илүү үр дүнтэй аргыг санал болгох зорилготой юм. "уян хатан").
Уян хатан зохион байгуулалтын гол санаа нь саванд орон зайг илүү сайн дүүргэхийн тулд (ихэнх тохиолдолд бүх төрлийн дэлгэц, дэлгэцийн хэмжээг дэмжих) элементүүдийн өргөн / өндрийг (болон дарааллыг) өөрчлөх боломжийг олгох явдал юм.Уян сав нь орон зайг дүүргэхийн тулд элементүүдийг сунгаж эсвэл халихаас сэргийлж шахдаг.
Хамгийн чухал нь flexbox-ийн зохион байгуулалт нь ердийн зохион байгуулалтаас ялгаатай нь чиглэлээс хамаардаггүй (блокуудыг босоо байрлалтай, шугаман элементүүдийг хэвтээ байдлаар байрлуулсан).Ердийн зохион байгуулалт нь вэб хуудасны хувьд маш сайн боловч том эсвэл нарийн төвөгтэй програмуудыг (ялангуяа дэлгэцийн чиглэлийг өөрчлөх, хэмжээг өөрчлөх, сунгах, багасгах гэх мэт) дэмжих уян хатан чанаргүй байдаг..
Учир нь flexbox нь зөвхөн нэг өмч биш бүхэл бүтэн модуль бөгөөд олон шинж чанарыг нэгтгэдэг.Тэдгээрийн заримыг нь саванд (эцэг эх элементийг уян хатан контейнер гэж нэрлэдэг) хэрэглэх ёстой бол бусад шинж чанаруудыг хүүхэд элементүүд эсвэл уян хатан элементүүдэд хэрэглэнэ.
Энгийн зохион байгуулалт нь блок болон шугамын элементүүдийн урсгалын чиглэл дээр суурилдаг бол уян хатан байрлал нь "уян хатан урсгалын чиглэл" дээр суурилдаг.
Flexbox
Үндсэндээ элементүүдийг үндсэн тэнхлэгийн дагуу (үндсэн эхлэлээс үндсэн төгсгөл хүртэл) эсвэл хөндлөн тэнхлэгийн дагуу (хөндлөн эхлэлээс хөндлөн төгсгөл хүртэл) тараана.
main-axis — уян хатан элементүүд байрлах үндсэн тэнхлэг.Энэ нь хэвтээ байх ёстой гэдгийг анхаарна уу, энэ бүхэн зөвтгөх агуулгын чанараас хамаарна.
үндсэн эхлэл | үндсэн төгсгөл - уян хатан элементүүдийг үндсэн эхлэлийн байрлалаас үндсэн төгсгөлийн байрлал хүртэл саванд хийнэ.
үндсэн хэмжээ - сонгосон үндсэн хэмжээнээс хамааран уян хатан элементийн өргөн эсвэл өндөр.Үндсэн хэмжигдэхүүн нь элементийн өргөн эсвэл өндөр байж болно.
хөндлөн тэнхлэг - гол тэнхлэгт перпендикуляр хөндлөн тэнхлэг.Түүний чиглэл нь үндсэн тэнхлэгийн чиглэлээс хамаарна.
хөндлөн эхлэл | хөндлөн төгсгөл - уян хатан шугамыг элементүүдээр дүүргэж, хөндлөн эхлэх байрлал болон хөндлөн төгсгөлийн байрлалаас саванд хийнэ.
хөндлөн хэмжээ - сонгосон хэмжээсээс хамааран уян хатан элементийн өргөн эсвэл өндөр нь энэ утгатай тэнцүү байна.Энэ шинж чанар нь сонгосон хэмжээсээс хамааран элементийн өргөн эсвэл өндөртэй ижил байна.
Үл хөдлөх хөрөнгө
дэлгэц: flex | inline-flex;
Флекс савыг (сонгосон утгаас хамааран шугаман эсвэл блок) тодорхойлж, түүний бүх удамшлын хувьд уян хатан контекстийг холбоно.
дэлгэц: бусад утгууд | уян хатан | inline-flex;
Санаарай:
CSS баганууд нь уян хатан контейнертэй ажиллахгүйfloat, clear, vertical-align нь уян хатан зүйлтэй ажиллахгүй
уян хатан чиглэл
Флекс контейнерын эх элементийн өмнө хэрэгжинэ.
Үндсэн тэнхлэгийг тохируулж, ингэснээр саванд байрлуулсан уян хатан зүйлсийн чиглэлийг тодорхойлно.
уян хатан чиглэл: эгнээ | эгнээ-урвуу | багана | багана-урвуу
мөр (өгөгдмөл): ltr-д зүүнээс баруун тийш, rtl-д баруунаас зүүн тийш;
эгнээ-урвуу: баруунаас зүүн тийш ltr, зүүнээс баруун тийш rtl;
багана: эгнээтэй төстэй, дээрээс доош;
багана-урвуу: эгнээний урвуутай төстэй, доороос дээш.
уян хатан боолт
Флекс контейнерын эх элементийн өмнө хэрэгжинэ.
Савыг нэг шугамтай эсвэл олон шугамтай эсэх, мөн хөндлөн тэнхлэгийн чиглэлийг тодорхойлох нь шинэ шугамуудыг байрлуулах чиглэлийг тодорхойлдог.
flex-wrap: nowrap | боох | боох-урвуу
nowrap (өгөгдмөл): нэг мөр / ltr-д зүүнээс баруун тийш, rtl-д баруунаас зүүн тийш;
боох: multiline / ltr-ийн хувьд зүүнээс баруун тийш, rtl-ийн хувьд баруунаас зүүн тийш;
ороох-урвуу: олон мөр / баруунаас зүүн тийш ltr, зүүнээс баруун тийш rtl.
уян хатан урсгал
Флекс контейнерын эх элементийн өмнө хэрэгжинэ.
Энэ нь гол болон хөндлөн тэнхлэгүүдийг хамтдаа тодорхойлдог flex-direction болон flex-wrap шинж чанаруудын товчлол юм.Өгөгдмөл утга нь row nowrap юм.
уян хатан урсгал< ‘flex-direction’> || < ‘Flex-wrap’>
зөвтгөх-агуулга
Флекс контейнерын эх элементийн өмнө хэрэгжинэ.
Гол тэнхлэгтэй харьцуулахад тэгшитгэлийг тодорхойлно.Шугамын элементүүд "сунадаггүй" эсвэл сунадаггүй, гэхдээ аль хэдийн хамгийн дээд хэмжээндээ хүрсэн тохиолдолд чөлөөт зайг хуваарилахад тусалдаг.Мөн элементүүдийг шугамаас давсан үед тэдгээрийн зэрэгцүүлэлтийг хянах боломжийг олгодог.
justify-content: flex-start | уян хатан төгсгөл | төв | хоорондын зай | орон зай - эргэн тойронд
flex-start (анхдагч): зүйлүүд мөрийн эхэнд шилжих;
flex-end: элементүүд нь шугамын төгсгөлд шилжих;
төв: элементүүд нь шугамын дунд зэрэгцсэн;
хоорондын зай: элементүүд жигд тархсан (мөрийн эхэнд байгаа эхний элемент, төгсгөлд)
зай эргэн тойронд: элементүүд нь хоорондоо ижил зайд болон шугамын гадна талд жигд тархсан.
зөвтгөх-агуулга
зэрэгцүүлэх
Флекс контейнерын эх элементийн өмнө хэрэгжинэ.
Одоогийн мөр дээрх хөндлөн тэнхлэгтэй харьцуулахад уян хатан зүйлсийг хэрхэн байрлуулах өгөгдмөл үйлдлийг тодорхойлдог.Үүнийг хөндлөн тэнхлэгт (гол тэнхлэгт перпендикуляр) тохирох агуулгын хувилбар гэж бодоорой.
align-items: flex-start | уян хатан төгсгөл | төв | суурь | сунгах
flex-start: хөндлөн эхлэх байрлалд байрлах элементүүдийн хөндлөн эхлэлийн хил;
flex-end: хөндлөн төгсгөлийн байрлалд байрлах элементүүдийн хөндлөн төгсгөлийн хил;
төв: элементүүд нь хөндлөн тэнхлэгийн төвд нийцсэн;
суурь: элементүүд нь үндсэн шугамтай нийцэж байна;
сунгах (анхдагч): элементүүдийг савыг дүүргэхийн тулд сунгасан (мин-өргөн / хамгийн их өргөнийг харгалзан).
зэрэгцүүлэх
нийцүүлэх-агуулга
Флекс контейнерын эх элементийн өмнө хэрэгжинэ. Хөндлөн тэнхлэг дээр сул зай байгаа үед уян савны мөрүүдийг тэгшилнэ. Тэмдэглэл: Энэ өмч нь нэг шугамын флексбокстой ажиллахгүй.
align-content: flex-start | уян хатан төгсгөл | төв | хоорондын зай | эргэн тойрон дахь орон зай | сунгах
flex-start: шугамууд нь савны эхлэлтэй харьцуулахад зэрэгцсэн;
flex-end: шугамууд нь савны төгсгөлтэй харьцуулахад зэрэгцсэн;
төв: шугамууд нь савны голд нийцсэн;
хоорондын зай: шугамууд жигд тархсан (мөрийн эхэнд эхний мөр, төгсгөлд)
эргэн тойронд зай: шугамууд хоорондоо ижил зайд жигд тархсан;
сунгах (өгөгдмөл): Боломжтой зайг дүүргэхийн тулд мөрүүдийг сунгасан.
нийцүүлэх-агуулга
захиалга
Анхдагч байдлаар, уян хатан зүйлсийг анхны дарааллаар нь байрлуулна.Гэхдээ захиалгын шинж чанар нь саванд харагдах дарааллыг хянах боломжтой.
захиалга 1
уян хатан ургах
Хүүхэд элемент/флекс элементэд хамаарна. Шаардлагатай бол уян хатан элементийн "өсөх" чадварыг тодорхойлдог.Хэмжээгүй утгыг авч, пропорциональ байдлаар үйлчилнэ.Энэ нь элемент нь саванд хэр их зай эзлэхийг тодорхойлдог. Хэрэв бүх элементүүд нь flex-grow шинж чанарыг 1 гэж тохируулсан бол хүүхэд бүр савны дотор ижил хэмжээтэй байх болно.Хэрвээ та хүүхдүүдийн аль нэгийг нь 2 болговол бусадтай харьцуулахад хоёр дахин их зай эзэлнэ.
уян хатан ургах
уян хатан агшилт
Хүүхэд элемент/флекс элементэд хамаарна.
Шаардлагатай үед уян хатан зүйлийг багасгах чадварыг тодорхойлдог.
уян хатан агшилт
Сөрөг тоог хүлээн авахгүй.
уян хатан суурь
Хүүхэд элемент/флекс элементэд хамаарна. Контейнер дотор зай гаргахаас өмнө элементийн анхдагч хэмжээг тодорхойлно.
уян хатан суурь
уян хатан
Хүүхэд элемент/флекс элементэд хамаарна. Энэ нь flex-grow, flex-shrink, flex-basis гэсэн товчлол юм.Хоёр ба гурав дахь параметрүүд (flex-shrink, flex-basis) нь сонголттой.Өгөгдмөл утга нь 0 1 auto.
flex: байхгүй | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]
өөрийгөө тэгшлэх
Хүүхэд элемент/флекс элементэд хамаарна. Тус тусад нь уян хатан зүйлсийн өгөгдмөл эсвэл зэрэгцүүлэх тохиргоог хүчингүй болгох боломжийг танд олгоно. Боломжтой утгыг илүү сайн ойлгохын тулд align-items шинж чанарын тайлбараас харна уу.
align-self: auto | уян хатан эхлэл | уян хатан төгсгөл | төв | суурь | сунгах
Жишээ
Бараг өдөр бүр тохиолддог маш энгийн жишээнээс эхэлцгээе: яг төв рүүгээ чиглүүлэх.Хэрэв та flexbox ашигладаг бол илүү хялбар зүйл байхгүй.
Эцэг эх (дэлгэц: flex; өндөр: 300px; ) .child ( өргөн: 100px; / * Юу ч байсан * / өндөр: 100px; / * Юу ч байсан * / зах: автомат; / * Magic! * / )
Энэ жишээ нь автоматаар тохируулсан уян савны доорх захын зай нь нэмэлт зай эзэлдэг тул энэ аргаар догол хийх ажил нь элементийг хоёр тэнхлэг дээр яг төвлөрүүлэх болно. Одоо зарим шинж чанарыг ашиглая.Тогтмол хэмжээтэй (гоо сайхны хувьд) 6 элементийн багцыг төсөөлөөд үз дээ, гэхдээ савны хэмжээг өөрчлөх чадвартай.Бид хөтчийн цонхны хэмжээг өөрчлөхөд бүх зүйл сайхан харагдахын тулд тэдгээрийг хэвтээ байдлаар жигд хуваарилахыг хүсч байна (@media асуулга байхгүй!).
Флекс сав (
/ * Эхлээд уян хатан контекст үүсгэцгээе * /
дэлгэц: уян хатан;
/* Одоо урсгалын чиглэл болон элементүүдийг хүсч байгаа эсэхийг тодорхойлъё
шинэ шугам руу шилжсэн
* Энэ нь дараахтай адил гэдгийг санаарай.
* уян хатан чиглэл: эгнээ;
* Flex-wrap: боолт;
* /
уян хатан урсгал: эгнээний боолт;
/ * Одоо зай хэрхэн хуваарилагдахыг тодорхойлъё * /
}
Бэлэн. Бусад бүх зүйл бол бүртгэлийн асуудал юм. Өөр зүйл туршиж үзье.Бид сайтынхаа хамгийн дээд хэсэгт баруун тийш зэрэгцүүлсэн навигац хийхийг хүсч байна гэж төсөөлөөд үз дээ, гэхдээ бид үүнийг дунд хэмжээний дэлгэц дээр төвд зэрэгцүүлж, жижиг дэлгэц дээр нэг багана болгохыг хүсч байна.Бүх зүйл маш энгийн.
/*Том дэлгэц*/
.navigation(
дэлгэц: уян хатан;
уян хатан урсгал: эгнээний боолт;
/* Элементүүдийг үндсэн тэнхлэгийн дагуу шугамын төгсгөлд шилжүүлнэ * /
зөвтгөх агуулга: уян хатан төгсгөл;
}
бүх медиа ба (хамгийн их өргөн: 800px) (
.navigation(
/* Дунд зэргийн дэлгэцийн хувьд бид навигацыг голлодог.
элементүүдийн хоорондох чөлөөт зайг жигд хуваарилах * /
зөвтгөх-агуулга: орон зай-ойролцоо;
}
}
/*Жижиг дэлгэц*/
бүх медиа ба (хамгийн их өргөн: 500px) (
.navigation(
/ * Жижиг дэлгэц дээр мөрийн оронд элементүүдийг баганад байрлуулдаг * /
уян хатан чиглэл: багана;
}
}
Уян эд зүйлсийн уян хатан чанараар тоглоцгооё!Гар утсанд ээлтэй гурван багана бүхий бүтэн өргөнтэй толгой болон хөлийн байрлалтай бол ямар вэ?Мөн өөр өөр дарааллаар.
Боодол (
дэлгэц: уян хатан;
уян хатан урсгал: эгнээний боолт;
}
/ * Бүх элементүүдийг 100% өргөн болгож тохируулах * /
.header, .main, .nav, .side, .footer (
уян хатан 1100%;
}
/* Энэ тохиолдолд бид биднийг удирдан чиглүүлэх анхны захиалгад найдаж байна
* Хөдөлгөөнт төхөөрөмж:
* 1 толгой
* 2 Nav
* 3 үндсэн
* 4 хажуу тийшээ
* 5 хөл
* /
/*Дунд дэлгэц*/
бүх медиа ба (мин-өргөн: 600px) (
/ * Хажуугийн самбар хоёулаа нэг мөрөнд байрладаг * /
.side (flex: 1 auto; )
}
/*Том дэлгэц*/
Flexbox-ийг CSS дээр зохион байгуулалтыг бий болгоход асар их хэмжээний асуудлыг шийдвэрлэх амжилттай оролдлого гэж нэрлэж болно. Гэхдээ бид түүний тайлбар руу шилжихээсээ өмнө одоо ашиглаж байгаа зохион байгуулалтын аргуудад юу нь буруу байгааг олж мэдье?
Аливаа зохион байгуулалтын дизайнер нь ямар нэг зүйлийг босоо байдлаар тэгшлэх эсвэл резинэн дунд багана бүхий 3 баганатай зохион байгуулалт хийх хэд хэдэн аргыг мэддэг. Гэхдээ эдгээр бүх аргууд нь хачирхалтай, хакердсан мэт харагддаг, бүх тохиолдолд тохиромжгүй, ойлгоход хэцүү бөгөөд түүхэнд бий болсон ид шидийн тодорхой нөхцөл хангагдаагүй тохиолдолд ажиллахгүй гэдгийг хүлээн зөвшөөр.
Энэ нь html болон css нь хувьслын замаар хөгжсөнтэй холбоотой юм. Эхэндээ вэб хуудсууд нь нэг урсгалтай текстийн баримтууд шиг харагддаг байсан бол хэсэг хугацааны дараа хуудсыг блок болгон хуваах нь хүснэгтүүдээр хийгддэг, дараа нь хөвөгч хэлбэрээр байрлуулах нь моод болж, ie6 албан ёсоор нас барсны дараа inline-block техникүүд гарч ирэв. бас нэмсэн. Үүний үр дүнд бид одоо байгаа бүх вэб хуудсын 99.9% -д зориулж загвар зохион бүтээхэд ашигладаг эдгээр бүх техникүүдийн тэсрэх хольцыг өвлөн авсан.
Флекс савны доторх блокуудын олон шугамын зохион байгуулалт.
уян хатан боолт
Дээр дурдсан бүх жишээг блокуудын нэг мөр (нэг багана) зохион байгуулалтыг харгалзан барьсан болно. Анхдагч байдлаар уян хатан сав нь дотроо блокуудыг нэг мөрөнд байрлуулна гэж хэлэх ёстой. Гэсэн хэдий ч техникийн үзүүлэлтүүд нь олон шугамын горимыг дэмждэг. Flex-wrap CSS шинж чанар нь уян хатан контейнер доторх олон мөрийн агуулгыг хариуцдаг.
Боломжтой утгууд уян хатан боолт:
- одоо rap (өгөгдмөл утга): блокуудыг зүүнээс баруун тийш нэг мөрөнд байрлуулна (баруунаас зүүн тийш rtl)
- боох: блокуудыг хэд хэдэн хэвтээ эгнээнд байрлуулна (хэрэв тэдгээр нь нэг эгнээнд тохирохгүй бол). Тэд бие биенээ зүүнээс баруун тийш дагадаг (баруунаас зүүн тийш rtl)
- боох-урвуу: ижил боох, гэхдээ блокуудыг урвуу дарааллаар байрлуулна.
flex-flow нь flex-direction + flex-wrap-ийн тохиромжтой товчлол юм
Үндсэндээ уян хатан урсгал нь үндсэн болон олон шугамын хөндлөн тэнхлэгийн чиглэлийг нэг шинж чанарт дүрслэх боломжийг олгодог. Өгөгдмөл уян хатан урсгал: row nowrap .
уян хатан урсгал:<‘flex-direction’> || <‘flex-wrap’>
CSS
/* өөрөөр хэлбэл ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* энэ нь...-тэй адил юм */ .my-flex-block( flex-flow: баганын боолт ;)нийцүүлэх-агуулга
Түүнчлэн align-content шинж чанар байдаг бөгөөд энэ нь үүссэн блокуудын эгнээ хэрхэн босоо байрлалтай байх, тэдгээр нь уян хатан савны бүх орон зайг хэрхэн хуваахыг тодорхойлдог.
Чухал: align-content нь зөвхөн олон мөрийн горимд ажилладаг (жишээ нь: flex-wrap:wrap; эсвэл flex-wrap:wrap-reverse;)
Боломжтой утгууд нийцүүлэх-агуулга:
- flex-start: эгнээний блокуудыг уян хатан савны эхэнд дардаг.
- flex-end: блокуудын эгнээ нь уян хатан савны төгсгөлд дарагдсан байна
- төв: блокуудын эгнээ нь уян хатан савны төвд байна
- зай хоорондын зай: блокуудын эхний эгнээ нь уян хатан савны эхэнд, сүүлчийн эгнээ нь төгсгөлд, бусад бүх эгнээ үлдсэн зайд жигд тархсан байна.
- эргэн тойронд зай: блокуудын эгнээ нь уян хатан савны эхнээс төгсгөл хүртэл жигд тархсан бөгөөд бүх боломжтой зайг тэнцүү хуваана.
- сунгах (өгөгдмөл утга): Блокуудын эгнээ нь бүх боломжит зайг эзлэхийн тулд сунгасан байна.
CSS-ийн flex-wrap болон align-content шинж чанаруудыг flex контейнерт шууд хэрэглэх ёстой, түүний хүүхдүүдэд биш.
Флекс дэх олон мөрийн шинж чанаруудын демо
Флекс контейнерийн хүүхдийн элементүүдийн CSS дүрмүүд (flex блокууд)
flex-basis – нэг уян блокийн үндсэн хэмжээ
Бусад уян хатан хүчин зүйл дээр тулгуурлан хувиргахаас өмнө уян блокийн анхны гол тэнхлэгийн хэмжээг тохируулна. Дурын уртын нэгжээр (px, em, %, ...) эсвэл автоматаар (өгөгдмөл) зааж өгч болно. Хэрэв автоматаар тохируулсан бол блокны хэмжээсийг (өргөн, өндөр) үндэс болгон авдаг бөгөөд энэ нь эргээд тодорхой заагаагүй бол агуулгын хэмжээнээс хамаарч болно.
flex-grow – нэг флекс блокийн “шунал”
Шаардлагатай бол бие даасан уян блок нь зэргэлдээх элементүүдээс хэр том байж болохыг тодорхойлдог. flex-grow нь хэмжээсгүй утгыг хүлээн авдаг (өгөгдмөл 0)
Жишээ 1:
- Хэрэв уян хатан савны доторх бүх уян хайрцаг нь flex-grow:1-тэй бол тэдгээр нь ижил хэмжээтэй байх болно.
- Хэрэв тэдгээрийн аль нэг нь flex-grow:2-тэй бол энэ нь бусад бүхнээс 2 дахин их байх болно
Жишээ 2:
- Хэрэв уян хатан савны доторх бүх уян хайрцаг нь flex-grow:3-тай бол тэдгээр нь ижил хэмжээтэй байх болно.
- Хэрэв тэдгээрийн аль нэг нь flex-grow:12 байвал бусад бүхнээс 4 дахин том болно
Өөрөөр хэлбэл, flex-grow-ийн үнэмлэхүй утга нь яг өргөнийг тодорхойлдоггүй. Энэ нь ижил түвшний бусад уян блокуудтай харьцуулахад түүний "шунах" зэргийг тодорхойлдог.
flex-shrink - нэг уян блокийн "шахах" хүчин зүйл
Хангалттай сул зай байхгүй бол уян хатан савны доторх зэргэлдээ элементүүдтэй харьцуулахад уян блок хэр хэмжээгээр агшихыг тодорхойлно. Өгөгдмөл нь 1.
flex – flex-grow, flex-shrink болон flex-basis шинж чанаруудын товчлол
flex: байхгүй | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
CSS
/* өөрөөр хэлбэл ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex base: 30em; ) /* энэ нь... */ .my-flex-block( flex) : 12 3 30 цаг; )flex-grow, flex-shrink болон flex-basis-ийн демо
align-self – хөндлөн тэнхлэгийн дагуу нэг уян хатан блокыг тэгшлэх.
Бие даасан уян блокийн хувьд flex container-ийн align-items шинж чанарыг хүчингүй болгох боломжтой болгодог.
Боломжтой өөрийгөө тэгшлэх утгууд (зүйлүүдийг тэгшлэхтэй ижил 5 сонголт)
- flex-start: уян хатан блок нь хөндлөн тэнхлэгийн эхэнд дарагдсан байна
- flex-end: уян хатан блок нь хөндлөн тэнхлэгийн төгсгөлд дарагдсан байна
- төв: уян хатан блок нь хөндлөн тэнхлэгийн төвд байрладаг
- суурь: уян хатан блок нь үндсэн шугамтай зэрэгцсэн
- сунгах (өгөгдмөл утга): Флекс блок нь хөндлөн тэнхлэгийн дагуу байгаа бүх зайг эзлэхээр сунгасан бөгөөд хэрэв тохируулсан бол хамгийн бага өргөн / хамгийн их өргөнийг харгалзан үзнэ.
захиалга – уян хатан савны доторх нэг уян блокийн дараалал.
Анхдагч байдлаар, бүх блокууд html-д заасан дарааллаар бие биенээ дагадаг. Гэхдээ захиалгын шинж чанарыг ашиглан энэ захиалгыг өөрчилж болно. Энэ нь бүхэл тоогоор тодорхойлогдсон бөгөөд анхдагч нь 0 байна.
Захиалгын утга нь дарааллын элементийн үнэмлэхүй байрлалыг заагаагүй болно. Энэ нь элементийн байрлалын жинг тодорхойлдог.
HTML
Энэ тохиолдолд блокууд үндсэн тэнхлэгийн дагуу дараах дарааллаар явагдана: зүйл5, зүйл1, зүйл3, зүйл4, зүйл2
Өөрийгөө тэгшлэх, эмх цэгцтэй болгоход зориулсан демо
захын зай: автомат босоо. Мөрөөдөл биелдэг!
Margin:auto-ээр дамжуулан танил хэвтээ тохируулга нь босоо чиглэлд бас ажилладаг тул та Flexbox-д дуртай байж болно!
My-flex-container (дэлгэц: flex; өндөр: 300px; /* Эсвэл ямар ч байсан */ ) .my-flex-block ( өргөн: 100px; /* Эсвэл ямар ч байсан */ өндөр: 100px; /* Эсвэл ямар ч байсан * / захын зай: auto; /* ид шид! Блок нь босоо болон хэвтээ чиглэлд төвлөрсөн! */ )
Санаж байх зүйлс
- Шаардлагагүй тохиолдолд та flexbox ашиглах ёсгүй.
- Бүс нутгийг тодорхойлж, агуулгын дарааллыг өөрчлөх нь олон тохиолдолд хуудасны бүтцээс хамааралтай болгоход тустай хэвээр байна. Үүнийг сайтар тунгаан бод.
- Flexbox-ийг ойлгож, үндсийг нь мэдэж аваарай. Энэ нь хүлээгдэж буй үр дүнд хүрэхэд илүү хялбар болгодог.
- Маржингийн талаар бүү мартаарай. Тэдгээрийг тэнхлэгийн шугамыг тохируулахдаа харгалзан үздэг. Флексбокс дахь захын зай нь ердийн урсгалтай адил "нурдаггүй" гэдгийг санах нь чухал.
- Флекс блокуудын хөвөх утгыг тооцохгүй бөгөөд ямар ч утгагүй болно. Энэ нь flexbox руу шилжихэд ямар нэгэн байдлаар ашиглагдаж болох юм.
- Flexbox нь вэб бүрэлдэхүүн хэсгүүд болон вэб хуудсын бие даасан хэсгүүдийн зохион байгуулалтад маш сайн тохирсон боловч үндсэн байршлыг (нийтлэлийн байрлал, толгой, хөл, навигаци гэх мэт) байрлуулахдаа хамгийн сайн талыг харуулаагүй болно. Энэ нь маргаантай асуудал хэвээр байгаа ч энэ нийтлэл нь сул талуудыг маш үнэмшилтэй харуулж байна xanthir.com/blog/b4580
Эцэст нь
Мэдээжийн хэрэг, flexbox нь зохион байгуулалтын бусад бүх аргыг орлохгүй, гэхдээ мэдээжийн хэрэг ойрын ирээдүйд асар олон тооны асуудлыг шийдвэрлэхэд зохих байр суурийг эзэлнэ гэж би бодож байна. Мэдээжийн хэрэг, та одоо түүнтэй хамт ажиллахыг хичээх хэрэгтэй. Дараах нийтлэлүүдийн нэг нь уян хатан байрлалтай ажиллах тодорхой жишээнүүдэд зориулагдсан болно. Мэдээнд бүртгүүлээрэй ;)
Align-content шинж чанар нь чөлөөтэй зай байгаа тохиолдолд уян тэнхлэгийн дагуу уян хатан савны доторх шугамын тэгшитгэлийн төрлийг зааж өгдөг.
Үүнд хамаарна: уян хатан сав.
Өгөгдмөл утга: сунгах.
Flex-start Шугамууд нь хөндлөн тэнхлэгийн эхэнд байрладаг. Дараагийн мөр бүр өмнөх мөртэй ижил байна. flex-end Мөрүүдийг хөндлөн тэнхлэгийн төгсгөлөөс эхлэн байрлуулна. Өмнөх мөр бүр дараагийнхтай ижилхэн байна. төв Мөрүүдийг савны төвд байрлуулна. space-between Шугамууд нь саванд жигд тархсан бөгөөд тэдгээрийн хоорондох зай нь ижил байна. space-around Шугамууд хоорондоо жигд зайтай байхаар зэргэлдээх хоёр шугамын хоорондох зай ижил байна. Эхний мөрийн өмнөх болон сүүлчийн мөрийн дараах хоосон зай нь хоёр зэргэлдээ мөрийн хоорондох зайны хагастай тэнцүү байна. space-evenly Мөрүүд жигд тархсан. Эхний мөрийн өмнөх ба сүүлчийн мөрний дараах цагаан зай нь бусад мөрүүдийн өргөнтэй ижил байна. сунгах Боломжтой зайг дүүргэхийн тулд шугамууд жигд сунадаг.
Align-content шинж чанар нь хөндлөвч тэнхлэгт нэмэлт зай байгаа үед уян савны шугамыг flex контейнер дотор тэгшилдэг бөгөөд энэ нь үндсэн тэнхлэг доторх бие даасан зүйлсийг зөвтгөх агуулгатай адил юм. Энэ шинж чанар нь нэг шугамын уян хатан саванд ямар ч нөлөө үзүүлэхгүй гэдгийг анхаарна уу. Утга нь дараахь утгатай байна.
Анхаарна уу: Зөвхөн олон шугамтай уян саванд шугамыг тэгшлэхийн тулд хөндлөн тэнхлэгт чөлөөтэй зай байдаг, учир нь нэг шугамтай уян саванд улны шугам автоматаар сунаж, зайг дүүргэдэг.
-д хамаарна: уян хатан сав.
Анхны: сунгах.
Flex-start шугамууд нь уян хатан савны эхлэл рүү чиглэгддэг. Флекс савны эхний шугамын хөндлөн эхлэлийн ирмэгийг уян хатан савны хөндлөн эхлэлийн ирмэгтэй тэгшхэн байрлуулж, дараагийн мөр бүрийг өмнөх мөртэй тэгшхэн байрлуулна. flex-end шугамууд нь уян хатан савны төгсгөлд чиглэгддэг. Сүүлчийн шугамын хөндлөн ирмэгийг уян хатан савны хөндлөн ирмэгтэй тэгшхэн байрлуулж, өмнөх мөр бүрийг дараагийн шугамтай тэгшхэн байрлуулна. төв Шугамууд нь уян хатан савны төв рүү чиглэнэ. Флекс савны шугамыг бие биетэйгээ зэрэгцүүлэн байрлуулж, уян хатан савны голд зэрэгцүүлэн, уян хатан савны хөндлөн эхлэлийн агуулгын ирмэг ба уян савны эхний шугамын хооронд ижил хэмжээний зайтай байна. уян хатан савны хөндлөн төгсгөлийн агуулгын ирмэг ба уян савны сүүлчийн мөр. (Хэрэв үлдсэн чөлөөт зай нь сөрөг байвал шугамууд хоёр чиглэлд жигд халих болно.) Хоорондын зай нь уян хатан саванд жигд тархсан байна. Хэрэв үлдсэн хоосон зай сөрөг байвал энэ утга нь flex-start-тай ижил байна. Үгүй бол flex савны эхний шугамын хөндлөн эхлэлийн ирмэгийг уян хатан савны хөндлөн эхлэлийн агуулгын ирмэгтэй, харин уян савны сүүлчийн шугамын хөндлөн төгсгөлийн ирмэгийг хөндлөвчтэй тэгшхэн байрлуулна. уян хатан савны төгсгөлийн агуулгын ирмэг ба уян савны үлдсэн мөрүүд нь зэргэлдээх хоёр мөр хоорондын зай ижил байхаар хуваарилагдсан байна. space-around Шугамууд нь уян хатан саванд жигд тархсан бөгөөд хоёр талдаа хагас хэмжээтэй зайтай. Хэрэв үлдсэн хоосон зай сөрөг байвал энэ утга нь төвтэй ижил байна. Үгүй бол уян хатан саванд байгаа шугамууд нь зэргэлдээх хоёр шугамын хоорондох зай ижил байхаар хуваарилагдсан бөгөөд эхний/сүүлийн мөр ба уян савны ирмэг хоорондын зай нь уян хатан шугамын хоорондох зайны хагастай тэнцүү байна. space-evenly Флекс саванд шугамууд жигд тархсан. Хэрэв үлдсэн хоосон зай сөрөг байвал энэ утга нь төвтэй ижил байна. Үгүй бол уян хатан саванд байгаа шугамууд нь уян хатан шугам бүрийн хоорондох зай ижил байхаар тархсан байна. сунгах Үлдсэн зайг эзлэхийн тулд шугамууд сунадаг. Хэрэв үлдсэн сул зай сөрөг байвал энэ утга нь flex-start-тай ижил байна. Үгүй бол чөлөөт зайг бүх шугамын хооронд тэнцүү хувааж, тэдгээрийн хөндлөн хэмжээг нэмэгдүүлнэ.