FlexBox-ийн практик хэрэглээ. Flexbox элементийн байршлын арга CSS flexes гэж юу вэ

07.12.2023 -

Сайн уу, Хабр!

Нэгэн сайхан үдэш бидний чат 2012 оны хавар бичсэн нийтлэлийнхээ зохиогчоос FlexBox ашиглан дахин нийтлэл бичих санал, юу, хэрхэн ажилладаг тухай тайлбарыг хүлээн авлаа. Хэсэг эргэлзсэний дараа тодорхойлолтыг илүү гүнзгий ойлгох сонирхол нэмэгдсээр байсан бөгөөд би тэрхүү жишээнүүдийг бичихээр баяртайгаар суув. Бид энэ талбарт умбах тусам олон нюансууд тодорхой болж эхэлсэн бөгөөд энэ нь бүдүүвчийг дахин төлөвлөхөөс илүү зүйл болж хувирав. Ерөнхийдөө энэ нийтлэлд би "CSS Flexible Box Layout Module" хэмээх гайхалтай техникийн үзүүлэлтийн талаар ярьж, түүний зарим сонирхолтой онцлог, хэрэглээний жишээг харуулахыг хүсч байна. Сонирхсон хүн бүрийг хакерд оролцохыг урьж байна.

Би та бүхний анхаарлыг татахыг хүсч байгаа зүйл бол FlexBox дээр зохион байгуулалт үүсгэхийн тулд хөгжүүлэгч тодорхой хэмжээний дасан зохицох шаардлагатай болно. Би өөрийнхөө жишээнээс харахад олон жилийн туршлага хэрцгий тоглоом тоглож байгааг мэдэрсэн. FlexBox нь урсгалд элементүүдийг байрлуулах талаар арай өөр арга барилыг шаарддаг.

Техникийн хэсэг

Аливаа жишээ рүү шилжихээсээ өмнө энэ тодорхойлолтод ямар шинж чанарууд багтсан, тэдгээр нь хэрхэн ажилладагийг ойлгох нь зүйтэй. Тэдний зарим нь эхэндээ тийм ч тодорхой биш, зарим нь бодит байдалтай ямар ч холбоогүй домогоор хүрээлэгдсэн байдаг.

Тэгэхээр. FlexBox-д хоёр үндсэн төрлийн элемент байдаг: Flex Container болон түүний хүүхдүүд - Flex Items. Контейнерийг эхлүүлэхийн тулд css-ээр тухайн элементэд хуваарилахад л хангалттай дэлгэц: уян хатан;эсвэл дэлгэц: inline-flex;. Флекс ба inline-flex-ийн ялгаа нь зөвхөн дэлгэцтэй төстэй савыг тойрсон элементүүдтэй харилцах зарчимд л байдаг: блок; болон дэлгэц: inline-block;, тус тус.

Уян савны дотор үндсэн тэнхлэг ба перпендикуляр эсвэл хөндлөн тэнхлэг гэсэн хоёр тэнхлэгийг үүсгэсэн. Ихэнхдээ уян хатан элементүүд нь үндсэн тэнхлэгийн дагуу, дараа нь хөндлөн тэнхлэгийн дагуу байрладаг. Анхдагчаар үндсэн тэнхлэг нь хэвтээ бөгөөд зүүнээс баруун тийш, хөндлөн тэнхлэг нь босоо, дээрээс доош чиглэсэн байна.

Тэнхлэгүүдийн чиглэлийг css шинж чанарыг ашиглан удирдаж болно уян хатан чиглэл. Энэ өмч нь хэд хэдэн утгыг авдаг:
эгнээ(өгөгдмөл): уян хатан савны үндсэн тэнхлэг нь одоогийн мөрийн чиглэлийн горимын шугаман тэнхлэгтэй ижил чиглэлтэй байна. Үндсэн тэнхлэгийн чиглэлийн эхлэл (үндсэн эхлэл) ба төгсгөл (үндсэн төгсгөл) нь шугаман тэнхлэгийн эхлэл (дотор эхлэл) ба төгсгөл (дотор төгсгөл) -тэй тохирч байна.
эгнээ-урвуу: Бүх зүйл эгнээнийхтэй адил, зөвхөн үндсэн эхлэл ба үндсэн төгсгөлийг солино.
багана: эгнээтэй адил, зөвхөн одоо үндсэн тэнхлэг нь дээрээс доош чиглэсэн байна.
багана-урвуу: эгнээ-урвуутай адил, зөвхөн үндсэн тэнхлэгийг доороос дээш чиглүүлнэ.
Энэ нь хэрхэн ажилладагийг jsfiddle дээрх жишээнээс харж болно.

Анхдагч байдлаар, саванд байгаа бүх уян хатан зүйлсийг нэг мөрөнд байрлуулсан бөгөөд тэдгээр нь саванд багтахгүй байсан ч түүний хил хязгаараас давж гардаг. Энэ зан үйлийг өмч ашиглан сэлгэж байна уян хатан боолт. Энэ өмч нь гурван мужтай:
одоо rap(өгөгдмөл): Flex зүйлсийг зүүнээс баруун тийш нэг мөрөнд жагсаасан.
боох: уян хатан элементүүд нь олон шугамын горимд баригдсан, дамжуулалтыг хөндлөн тэнхлэгийн чиглэлд, дээрээс доошоо хийдэг.
боох-урвуу: боодолтой адил, гэхдээ доороос дээш боож өгнө.
Нэг жишээ авч үзье.

Тохиромжтой болгохын тулд нэмэлт өмч байдаг уян хатан урсгал, үүнд та нэгэн зэрэг зааж өгч болно уян хатан чиглэлТэгээд уян хатан боолт. Энэ нь дараах байдалтай харагдаж байна. уян хатан урсгал:

Контейнер дэх элементүүдийг өмчийг ашиглан зэрэгцүүлж болно зөвтгөх-агуулгаүндсэн тэнхлэгийн дагуу. Энэ өмч нь таван өөр утгыг хүлээн зөвшөөрдөг.
уян хатан эхлэл(өгөгдмөл): Уян элементүүд нь үндсэн тэнхлэгийн гарал үүсэлтэй зэрэгцсэн байна.
уян хатан төгсгөл: элементүүдийг үндсэн тэнхлэгийн төгсгөлд байрлуулна
төв: Элементүүд нь үндсэн тэнхлэгийн төвд зэрэгцсэн байна
зай - хооронд: Элементүүд нь саванд байгаа бүх өргөнийг эзэлдэг, хамгийн гадна талын элементүүд нь савны ирмэг дээр нягт дарагдсан, чөлөөт зай нь элементүүдийн хооронд жигд тархсан байдаг.
орон зай - эргэн тойронд: Уян хатан элементүүд нь хоорондоо уялдаж, чөлөөт зайг элементүүдийн хооронд жигд хуваарилдаг. Гэхдээ савны ирмэг ба гаднах элементүүдийн хоорондох зай нь эгнээний дундах элементүүдийн хоорондох зайнаас хоёр дахин их байх болно гэдгийг тэмдэглэх нь зүйтэй.
Мэдээжийн хэрэг, та энэ өмч хэрхэн ажилладаг тухай жишээн дээр дарж болно.

Энэ нь бүгд биш, бид хөндлөн тэнхлэгийн дагуу элементүүдийг тэгшлэх чадвартай. Өмч хөрөнгийг ашиглах замаар зэрэгцүүлэх, энэ нь бас таван өөр утгыг авдаг, та сонирхолтой зан үйлд хүрч чадна. Энэ шинж чанар нь элементүүдийг бие биентэйгээ харьцуулах боломжийг олгодог.
уян хатан эхлэл: бүх элементүүдийг мөрийн эхэнд шилжүүлнэ
уян хатан төгсгөл: элементүүдийг мөрийн төгсгөлд оруулдаг
төв: элементүүдийг эгнээний төвд байрлуулна
суурь: Элементүүдийг текстийн үндсэн шугамтай зэрэгцүүлсэн
сунгах(анхдагч): элементүүдийг бүхэлд нь шугамыг дүүргэхийн тулд сунгасан.

Өмнөхтэй ижил төстэй өөр нэг өмч нийцүүлэх-агуулга. Энэ нь уян хатан савтай харьцуулахад бүх шугамыг тэгшлэх үүрэгтэй цорын ганц зүйл юм. Хэрэв уян хатан зүйлүүд нэг мөрийг эзэлвэл энэ нь ямар ч нөлөө үзүүлэхгүй. Үл хөдлөх хөрөнгө нь зургаан өөр утгыг авдаг.
уян хатан эхлэл: бүх мөрүүдийг хөндлөн тэнхлэгийн эхэнд дарна
уян хатан төгсгөл: бүх мөрүүдийг хөндлөн тэнхлэгийн төгсгөл хүртэл дардаг
төв: Бүх багц шугамууд хөндлөн тэнхлэгийн төвтэй зэрэгцсэн байна
зай - хооронд: шугамууд нь дээд ирмэгээс доод тал руу тархаж, шугамуудын хооронд чөлөөт зай үлдээдэг бол хамгийн гадна талын шугамууд нь савны ирмэг дээр дарагдсан байна.
орон зай - эргэн тойронд: Шугамууд нь саванд жигд тархсан.
сунгах(анхдагч): бүх боломжит зайг эзлэхийн тулд мөрүүдийг сунгасан.
Та энэ жишээн дээр align-items болон align-content хэрхэн ажилладгийг туршиж үзэж болно. Би эдгээр хоёр шинж чанарыг нэг жишээгээр тусгайлан танилцуулсан, учир нь тэдгээр нь хоорондоо нягт уялдаатай бөгөөд тус бүр нь өөр өөрийн үүргийг гүйцэтгэдэг. Элементүүдийг нэг мөрөнд эсвэл олон мөрөнд байрлуулахад юу болохыг анхаарна уу.

Бид уян хатан савны параметрүүдийг эрэмбэлсэн бөгөөд зөвхөн уян хатан элементүүдийн шинж чанарыг тодорхойлоход л үлдлээ.
Бидний танилцах эхний үл хөдлөх хөрөнгө бол захиалга. Энэ шинж чанар нь урсгал дахь тодорхой элементийн байрлалыг өөрчлөх боломжийг танд олгоно. Анхдагч байдлаар, бүх уян хатан зүйлүүд байдаг захиалга: 0;мөн байгалийн урсгалын дарааллаар баригдсан. Жишээн дээр та өөр өөр захиалгын утгыг хэрэглэвэл элементүүдийг хэрхэн сольж байгааг харж болно.

Гол шинж чанаруудын нэг нь уян хатан суурь. Энэ өмчийн тусламжтайгаар бид уян хатан зүйлийн үндсэн өргөнийг зааж өгч болно. Анхдагч утга нь авто. Энэ өмч нь нягт холбоотой уян хатан ургахТэгээд уян хатан агшилт, энэ талаар би бага зэрэг дараа ярих болно. px, %, em болон бусад нэгжийн өргөний утгыг хүлээн авна. Үндсэндээ энэ нь уян хатан элементийн өргөн биш бөгөөд энэ нь нэг төрлийн эхлэлийн цэг юм. Элемент сунах эсвэл багасахтай харьцуулахад. Автомат горимд элемент нь доторх агуулгатай харьцуулахад үндсэн өргөнийг авдаг.

уян хатан ургаххэд хэдэн эх сурвалж дээр энэ нь огт буруу тайлбартай байдаг. Энэ нь саванд байгаа элементүүдийн хэмжээсийн харьцааг тогтоодог гэж хэлдэг. Үнэндээ энэ нь үнэн биш юм. Энэ шинж чанар нь саванд сул зай байгаа үед элементийн томрох хүчин зүйлийг тодорхойлдог. Анхдагч байдлаар, энэ шинж чанар нь 0 утгатай байна. Бидэнд 500 пикселийн өргөнтэй уян хатан контейнер байгаа гэж төсөөлөөд үз дээ, дотор нь тус бүр нь 100 пикселийн өргөнтэй хоёр уян хатан зүйл байна. Энэ нь саванд өөр 300px хоосон зай үлдээдэг. Хэрэв бид flex-grow гэж зааж өгвөл: эхний элементийн хувьд flex-grow: 1; Үүний үр дүнд эдгээр блокууд нь савны өргөнийг бүхэлд нь эзлэх бөгөөд зөвхөн эхний блокийн өргөн нь 300px, хоёр дахь нь зөвхөн 200px байх болно. Юу болсон бэ? Юу болсон бэ гэвэл, саванд байгаа 300px чөлөөт зайг элементүүдийн хооронд 2:1 харьцаатай, эхнийх нь +200px, хоёр дахь нь +100px харьцаагаар хуваарилсан. Энэ нь үнэндээ ийм байдлаар ажилладаг.

Энд бид өөр ижил төстэй өмч рүү шилжих болно уян хатан агшилт. Өгөгдмөл утга нь 1. Энэ нь зөвхөн эсрэг чиглэлд элементүүдийн өргөнийг өөрчлөх хүчин зүйлийг тогтоодог. Хэрэв сав нь өргөнтэй бол багаэлементүүдийн үндсэн өргөний нийлбэрээс илүү байвал энэ шинж чанар хүчин төгөлдөр болно. Жишээлбэл, савны өргөн нь 600px, элементүүдийн уян хатан суурь нь 300px юм. Эхний элементэд flex-shrink: 2;, хоёр дахь элементэд flex-shrink: 1; гэж өг. Одоо савыг 300 пикселээр багасгая. Тиймээс элементүүдийн өргөний нийлбэр нь савнаас 300px их байна. Энэ ялгаа нь 2:1 харьцаагаар хуваарилагдсан тул эхний блокоос 200px, хоёр дахь блокоос 100px хасна. Элементүүдийн шинэ хэмжээ нь эхний болон хоёр дахь элементийн хувьд 100px ба 200px байна. Хэрэв бид flex-shrink-ийг 0 болгож тохируулбал элементийг үндсэн өргөнөөсөө бага хэмжээгээр багасгахаас сэргийлнэ.

Үнэн хэрэгтээ энэ нь бүгд хэрхэн ажилладаг талаар маш хялбаршуулсан тайлбар бөгөөд ингэснээр ерөнхий зарчим нь тодорхой болно. Илүү дэлгэрэнгүй, хэрэв хэн нэгэн сонирхож байгаа бол алгоритмыг тодорхойлолтод тайлбарласан болно.

Бүх гурван шинж чанарыг илэрхийллийг ашиглан товчилсон хэлбэрээр бичиж болно уян хатан. Энэ нь иймэрхүү харагдаж байна:
уян хатан: ;
Мөн бид бас хоёр товчилсон хувилбарыг бичиж болно, уян хатан: автомат;Тэгээд уян хатан: байхгүй;, юу гэсэн үг вэ гэхээр уян хатан: 1 1 автомат;Тэгээд уян хатан: 0 0 автомат;тус тус.

Уян хатан элементүүдийн сүүлчийн шинж чанар хэвээр байна өөрийгөө тэгшлэх. Энд бүх зүйл энгийн бөгөөд энэ нь контейнерт зориулсан align-itements-тэй адил бөгөөд энэ нь тодорхой элементийн зэрэгцүүлэлтийг хүчингүй болгох боломжийг олгодог.

Ингээд л болоо, би үүнээс залхаж байна! Бидэнд жишээ хэлээрэй!

Бид техникийн хэсгийг эрэмбэлсэн, энэ нь нэлээд урт болсон, гэхдээ та үүнд орох хэрэгтэй. Одоо бид практик хэрэглээ рүү шилжиж болно.
"Үнэхээр хэрэгцээтэй responsive layout-ийн таван загварыг" боловсруулах явцад бид хөгжүүлэгчдэд байнга тулгардаг ердийн нөхцөл байдлыг шийдвэрлэх шаардлагатай болсон. Flexbox-ийн тусламжтайгаар эдгээр шийдлүүдийг хэрэгжүүлэх нь илүү хялбар бөгөөд уян хатан болдог.
Үүнтэй ижил 4-р зохион байгуулалтыг авч үзье, учир нь ... Энэ нь хамгийн сонирхолтой элементүүдийг агуулдаг.

Эхлээд хуудасны үндсэн өргөнийг тодорхойлж, голд нь зэрэгцүүлж, хуудасны доод хэсэгт хөлийг дарна уу. Ердийнх шигээ.

Html (арын дэвсгэр: #ccc; мин-өндөр: 100%; фонт-гэр бүл: sans-serif; дэлгэц: -webkit-flex; дэлгэц: уян хатан; уян хатан чиглэл: багана; ) бие (хаваас: 0; дэвсгэр: 0 15px дэлгэц: -webkit-flex: flex: auto : -webkit-flex: 100%; : 960px; 430px;

Бид flex-grow-ийг тодорхойлсон тул: 1 for .main; Энэ нь бүрэн боломжтой өндөр хүртэл сунадаг бөгөөд ингэснээр хөлийг доод тал руу нь дарна. Энэхүү шийдлийн давуу тал нь хөл нь тогтмол бус өндөртэй байж болно.

Одоо лого болон цэсийг толгой хэсэгт байрлуулъя.
.лого (фонтын хэмжээ: 0; захын зай: -10px 10px 10px 0; дэлгэц: уян хатан; flex: байхгүй; align-items: center; ) .logo:before, .logo:after ( контент: ""; дэлгэц: блок ; ) .logo:befor (фон: #222; өргөн: 50px; өндөр: 50px; захын зай: 0 10px 0 20px; хүрээ-радиус: 50%; ) .logo: after (фон: #222; өргөн: 90px; өндөр : 30px; ) .nav (маржин: -5px 0 0 -5px; дэлгэц: -webkit-flex; дэлгэц: flex; flex-wrap: wrap; ) .nav-itm ( дэвсгэр: #222; өргөн: 130px; өндөр: 50px font-size: 1.5rem text-decoration: none: -webkit-content: center;

Гарчиг нь уян хатан боолттой тул: боолт; ба зөвтгөх-агуулга: зай-хооронд; Лого болон цэс нь толгойн янз бүрийн тал дээр тархсан бөгөөд хэрэв цэсэнд хангалттай зай байхгүй бол логоны доор гоёмсог шилжих болно.

Дараа нь бид том нийтлэл эсвэл баннерыг харж байна, энэ нь юу болохыг тодорхой хэлэхэд хэцүү, гэхдээ энэ нь гол зүйл биш юм. Бид баруун талд нь зураг, зүүн талд нь гарчигтай текст байна. Зохицуулалт нь дасан зохицох эсвэл хөдөлгөөнгүй байхаас үл хамааран аливаа элемент аль болох уян хатан байх ёстой гэсэн санааг би хувьдаа баримталдаг. Тиймээс энэ нийтлэлд бид зураг байрлуулсан хажуугийн самбартай бөгөөд яг ямар өргөн хэрэгтэйг хэлж чадахгүй, учир нь өнөөдөр бидэнд том, маргааш жижиг зураг байгаа бөгөөд бид энэ элементийг дахин хийхийг хүсэхгүй байна; бүр эхнээс нь. Энэ нь бидэнд шаардлагатай газраа авахын тулд хажуугийн самбар хэрэгтэй бөгөөд үлдсэн зай нь контент руу шилжих болно гэсэн үг юм. Үүнийг хийцгээе:

Хайрцаг ( үсгийн хэмжээ: 1.25rem; мөрийн өндөр: 1.5; үсгийн хэв маяг: налуу; захын зай: 0 0 40px -50px; дэлгэц: -webkit-flex; дэлгэц: уян хатан; flex-wrap: боох; зөвтгөх-контент: төв; .box-base (зүүн талын зах: 50px; flex: 1 0 430px; ) .box-side (зүүн талын зай: 50px; flex: байхгүй; ) .box-img ( хамгийн их өргөн: 100%; өндөр : автомат)

Гарчиг болон тексттэй .box-base-ийн хувьд би үндсэн өргөнийг зааж өгсөн уян хатан суурь: 430px;, мөн ашиглахыг хориглосон блок агшилт уян хатан агшилт: 0;. Энэхүү заль мэхийн тусламжтайгаар контент нь 430px-ээс бага өргөнтэй болж болохгүй гэж бид хэлсэн. Мөн .box-ын хувьд би зааж өгсөн уян хатан боолт: боох;Хажуугийн хэсэг болон контент нь container.box-т багтахгүй байх үед хажуугийн самбар автоматаар агуулгын доор унах болно. Мөн энэ бүхэн ямар ч өргөдөлгүйгээр @media! Энэ бол үнэхээр их дажгүй зүйл гэж би бодож байна.

Бид гурван баганын агуулгатай үлдлээ. Энэ асуудлыг шийдэх хэд хэдэн шийдэл байдаг, би тэдгээрийн аль нэгийг нь бусад загваруудад харуулах болно;
Контейнер үүсгээд .контент гэж нэрлээд тохиргоо хийцгээе.
.контент (доод талын зай: 30px; дэлгэц: -webkit-flex; дэлгэц: уян хатан; flex-wrap: боох; )

Уг контейнер нь .баннер, .пост, .коммент гэсэн гурван баганатай
.баннер ( уян хатан: 1 1 200 пиксел; ) . нийтлэл ( зах: 0 0 30px 30px; уян хатан: 1 1 200px; ) .сэтгэгдэл (маржин: 0 0 30px 30px; уян хатан: 1 1 200px; )

Багануудыг хэт нарийсгахгүйн тулд би багануудыг 200px-ийн өргөнтэй болгож өгсөн, гэхдээ шаардлагатай бол тэдгээрийг бие биенийхээ доор шилжүүлсэн нь дээр.

Бүтцийн дагуу бид @media-гүйгээр контентыг хийх боломжгүй тул баганын өргөнийг бага зэрэг тохируулцгаая.<800px и <600px.
@media дэлгэц ба (хамгийн их өргөн: 800px) ( .banners (зүүн талын зах: -30px; дэлгэц: -webkit-flex; дэлгэц: уян хатан; flex-basis: 100%; ) .пост (зүүн талын зах: 0; ) ) @media дэлгэц ба (хамгийн их өргөн: 600px) ( .контент (дэлгэц: блок; ) .баннерууд (маржин: 0; дэлгэц: блок; ) .сэтгэгдэл (маржин: 0; ) )

Энэ бол FlexBox дээр зохион байгуулалт үүсгэх бүх ид шид юм. Надад таалагдсан өөр нэг ажил бол 5-р зураглал, ялангуяа контентын дасан зохицох асуудал юм.

Ширээний дэлгэцийн нягтрал дээр бичлэгүүд хэрхэн гурван дараалсан сүлжээнд баригдаж байгааг бид харж байна. Харах цонхны өргөн 800px-ээс бага бол энэ сүлжээ нь нийтлэл бүхий багана болж хувирах ба бичлэгийн зургийг нийтлэлийн агуулгын зүүн болон баруун талд ээлжлэн байрлуулна. Хэрэв өргөн нь 600px-ээс бага бол шуудангийн зураг бүрэн нуугдана.
.grid (дэлгэц: -webkit-flex; дэлгэц: уян хатан; flex-wrap: боох; зөвтгөх-агуулга: хоорондын зай; ) .grid-itm ( доод талын зай: 30px; flex-basis: calc(33.33% - 30px) * 2/3); дэлгэц: -webkit-flex; flex-wrap: wrap; .grid-img (маржин: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; .grid-title (текстийг зэрэгцүүлэх: төвд; ) @media дэлгэц ба (хамгийн их өргөн: 800px) ( .grid-itm (flex-wrap: nowrap; flex-basis: 100%; ) grid-img ( flex: 0 0 auto ) .grid-itm:nth-child(seven) .grid-img ( margin: 0 0 0 30px; захиалга: 2; ) .grid-itm:nth-child(сонд) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title (текстийг зэрэгцүүлэх: зүүн; ) ) @media дэлгэц ба (хамгийн их өргөн: 600px) ( .grid-img (дэлгэц: байхгүй; ) )

Үнэн хэрэгтээ энэ нь FlexBox-ээр хэрэгжиж болох зүйлсийн зөвхөн багахан хэсэг юм. Тодорхойлолт нь энгийн код ашиглан маш нарийн төвөгтэй хуудасны байршлыг бүтээх боломжийг олгодог.

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 30em)

flex-grow, flex-shrink болон flex-basis-ийн демо

align-self – хөндлөн тэнхлэгийн дагуу нэг уян хатан блокыг тэгшлэх.

Бие даасан уян блокийн хувьд flex container-ийн align-items шинж чанарыг хүчингүй болгох боломжтой болгодог.

Боломжтой өөрийгөө тэгшлэх утгууд (зүйлүүдийг тэгшлэхтэй ижил 5 сонголт)

flex-start: уян хатан блок нь хөндлөн тэнхлэгийн эхэнд дарагдсан байна
flex-end: уян хатан блок нь хөндлөн тэнхлэгийн төгсгөлд дарагдсан байна
төв: уян хатан блок нь хөндлөн тэнхлэгийн төвд байрладаг
үндсэн шугам: уян хатан блок нь үндсэн шугамтай зэрэгцсэн
сунгах (өгөгдмөл утга): Флекс блок нь хөндлөн тэнхлэгийн дагуу байгаа бүх зайг эзлэхээр сунгасан бөгөөд хэрэв тохируулсан бол хамгийн бага өргөн / хамгийн их өргөнийг харгалзан үзнэ.

захиалга – уян хатан савны доторх нэг уян блокийн дараалал.

Анхдагч байдлаар, бүх блокууд html-д заасан дарааллаар бие биенээ дагадаг. Гэхдээ захиалгын шинж чанарыг ашиглан энэ захиалгыг өөрчилж болно. Энэ нь бүхэл тоогоор тодорхойлогдсон бөгөөд анхдагч нь 0 байна.

Захиалгын утга нь дарааллын элементийн үнэмлэхүй байрлалыг заагаагүй болно. Энэ нь элементийн байрлалын жинг тодорхойлдог.

HTML

зүйл1

зүйл2

зүйл3

зүйл 4

зүйл 5

Энэ тохиолдолд блокууд үндсэн тэнхлэгийн дагуу дараах дарааллаар явагдана: зүйл5, зүйл1, зүйл3, зүйл4, зүйл2

Өөрийгөө тэгшлэх, эмх цэгцтэй болгоход зориулсан демо

захын зай: автомат босоо. Мөрөөдөл биелдэг!

Margin:auto-ээр дамжуулан танил хэвтээ тохируулга нь босоо чиглэлд бас ажилладаг тул та ядаж Flexbox-д дуртай байх болно!

My-flex-container (дэлгэц: flex; өндөр: 300px; /* Эсвэл ямар ч байсан */ ) .my-flex-block ( өргөн: 100px; /* Эсвэл ямар ч байсан */ өндөр: 100px; /* Эсвэл ямар ч байсан * / захын зай: auto; /* Magic нь босоо болон хэвтээ байрлалтай */ )

Санаж байх зүйлс

Шаардлагагүй тохиолдолд та flexbox ашиглах ёсгүй.
Бүс нутгийг тодорхойлж, агуулгын дарааллыг өөрчлөх нь олон тохиолдолд хуудасны бүтцээс хамааралтай болгоход тустай хэвээр байна. Үүнийг сайтар тунгаан бод.
Flexbox-ийг ойлгож, үндсийг нь мэдэж аваарай. Энэ нь хүлээгдэж буй үр дүнд хүрэхэд илүү хялбар болгодог.
Маржингийн талаар бүү мартаарай. Тэдгээрийг тэнхлэгийн шугамыг тохируулахдаа харгалзан үздэг. Флексбокс дахь захын зай нь ердийн урсгалтай адил "нурдаггүй" гэдгийг санах нь чухал.
Флекс блокуудын хөвөх утгыг тооцохгүй бөгөөд ямар ч утгагүй болно. Энэ нь flexbox руу шилжихэд ямар нэгэн байдлаар ашиглагдаж болох юм.
Flexbox нь вэб бүрэлдэхүүн хэсгүүд болон вэб хуудасны бие даасан хэсгүүдийн зохион байгуулалтад маш сайн тохирдог боловч үндсэн байршлыг (нийтлэлийн байрлал, толгой, хөл, навигаци гэх мэт) байрлуулахдаа хамгийн сайн талыг харуулаагүй болно. Энэ нь маргаантай асуудал хэвээр байгаа ч энэ нийтлэл нь сул талуудыг маш үнэмшилтэй харуулж байна xanthir.com/blog/b4580

Эцэст нь

Мэдээжийн хэрэг, flexbox нь бусад бүх зохион байгуулалтын аргуудыг орлохгүй, гэхдээ мэдээжийн хэрэг ойрын ирээдүйд асар олон тооны ажлыг шийдвэрлэхэд зохих байр суурийг эзэлнэ гэж би бодож байна. Мэдээжийн хэрэг, та одоо түүнтэй хамт ажиллахыг хичээх хэрэгтэй. Дараах нийтлэлүүдийн нэг нь уян хатан байрлалтай ажиллах тодорхой жишээнүүдэд зориулагдсан болно. Мэдээнд бүртгүүлээрэй ;)

Агуулга:

Flexboxхуудасны блокуудыг цэгцлэх шинэ арга юм. Энэ нь хөвөгчөөс ялгаатай нь элементүүдийг байрлуулахад зориулагдсан технологи юм. Ашиглах замаар FlexboxТа элементүүдийг хэвтээ болон босоо байдлаар хялбархан зэрэгцүүлж, элементүүдийн харуулах чиглэл, дарааллыг өөрчлөх, блокуудыг эцэг эхийн бүрэн өндрөөр сунгах эсвэл доод ирмэг хүртэл хадаж болно.

2017.02.02-ны UPD:Би Flexbox дээр энгийн үзүүлбэрүүд болон техникийн үзүүлэлтүүдийн тайлбар бүхий тохиромжтой cheat хуудас хийсэн: Flexbox cheatsheet.

Жишээ нь зөвхөн шинэ синтаксийг ашигладаг. Бичиж байх үед тэдгээр нь хамгийн зөв харагдаж байна Chrome. Firefox дээр тэд хэсэгчлэн ажилладаг, Safari дээр тэд огт ажилладаггүй.

caniuse.com сайтын мэдээлснээр, Flexbox IE 8, 9 болон Opera Mini дэмждэггүй бөгөөд бусад хөтчүүдэд бүх шинж чанарыг дэмждэггүй ба/эсвэл угтвар оруулах шаардлагагүй.

Энэ нь яг одоо энэ технологийг өргөнөөр ашиглах боломжгүй гэсэн үг, гэхдээ одоо үүнийг илүү сайн мэдэх цаг болжээ.

Эхлээд та уян хатан элементүүдийг тэнхлэгийн дагуу байрлуулсан гэдгийг мэдэх хэрэгтэй. Анхдагч байдлаар, элементүүдийг хэвтээ байдлаар байрлуулна - дагуу үндсэн тэнхлэг- үндсэн тэнхлэг.

Үүнийг ашиглахдаа үүнийг бас анхаарч үзэх хэрэгтэй Flexbox float , clear болон vertical-align нь дотоод блокууд, түүнчлэн текст дэх баганыг зааж өгөх шинж чанаруудад ажиллахгүй.

Туршилт хийх туршилтын талбайг бэлдье:

Нэг эцэг эх (шар) болон 5 хүүхдийн блок.

Дэлгэц: уян хатан

Тэгээд одоо бид дэлгэцийн: flex-ийг эх элементэд нэмнэ. . Дотор div-ууд нь агуулгаас үл хамааран ижил өндөртэй баганатай (үндсэн тэнхлэгийн дагуу) эгнээнд байрладаг.

дэлгэц: уян хатан; Анхных шиг шугаман дээр эсвэл блок дээр суурилсан биш харин бүх хүүхэд элементүүдийг уян хатан болгодог.

Хэрэв эх блок нь боодолгүй зураг эсвэл текстийг агуулж байвал тэдгээр нь нэргүй уян хатан зүйлс болно.

Өмчийг харуулах Flexboxхоёр утгыг авч болно:

flex - блок элемент шиг ажилладаг. Блокуудын өргөнийг тооцоолохдоо байршлыг нэн тэргүүнд тавьдаг (хэрэв блокууд хангалттай өргөн биш бол агуулга нь хил хязгаарыг давж болно).

inline-flex - inline блок шиг ажилладаг. Агуулга нь тэргүүлэх ач холбогдолтой (агуулга нь шаардлагатай өргөн хүртэл блокуудыг тарааж, хэрэв боломжтой бол шугамууд багтах болно).

Уян хатан чиглэл

Блокийн байршлын чиглэлийг flex-direction шинж чанараар удирддаг.

Боломжит утгууд:

мөр - мөр (өгөгдмөл утга); эгнээ-урвуу - урвуу дарааллаар элементүүдтэй эгнээ; багана - багана; багана-урвуу - урвуу дарааллаар элементүүдтэй багана.

эгнээ ба эгнээ урвуу

багана ба багана-урвуу

Уян хатан боолт

Нэг мөрөнд олон блок байж болно. Тэдгээрийг боох эсэх нь flex-wrap шинж чанараар тодорхойлогддог.

Боломжит утгууд:

nowrap - блокуудыг шилжүүлээгүй (анхдагч утга); боодол - блокуудыг шилжүүлсэн; wrap-reverse - блокуудыг ороож, урвуу дарааллаар байрлуулна.

Flex-direction болон flex-wrap шинж чанаруудын товчлол нь: flex-flow .

Боломжит утгууд: та хоёр шинж чанарыг эсвэл зөвхөн нэгийг нь тохируулж болно. Жишээлбэл:

уян хатан урсгал: багана; уян хатан урсгал: боох-урвуу; уян хатан урсгал: баганын урвуу боолт;

Мөр-урвуу ороох-урвуу болгоход зориулсан демо:

Захиалга

Блокуудын дарааллыг хянахын тулд захиалга шинж чанарыг ашиглана уу.

Боломжит утгууд: тоо. Блокыг эхлээд тавихын тулд дараах тушаалыг өгнө үү: -1:

Зөвтгөх-агуулга

Элементүүдийг зэрэгцүүлэх хэд хэдэн шинж чанарууд байдаг: justify-content , align-items болон align-self .

зөвт-агуулгын болон align-зүйлүүдийг эцэг эхийн саванд, align-self-ийг хүүхдүүдэд хэрэглэнэ.

justify-content нь үндсэн тэнхлэгийг тохируулах үүрэгтэй.

Зөвшөөрөгдөх агуулгын боломжит утгууд:

flex-start - элементүүдийг үндсэн тэнхлэгийн эхнээс (үндсэн утга) зэрэгцүүлсэн; flex-end - элементүүд нь үндсэн тэнхлэгийн төгсгөлөөс зэрэгцсэн; төв - элементүүд нь үндсэн тэнхлэгийн төвд нийцсэн; хоорондын зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, хоорондоо чөлөөт зайг хуваарилдаг; эргэн тойрон дахь орон зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, эргэн тойрон дахь чөлөөт зайг хуваарилдаг.

уян хатан эхлэл ба уян төгсгөл

зай-хоорондоо, орон зай-ойролцоо

Зүйлүүдийг зэрэгцүүлэх

align-items нь перпендикуляр тэнхлэгийн дагуу тэгшлэх үүрэгтэй.

Зүйлүүдийг тэгшлэх боломжит утгууд:

flex-start - элементүүдийг перпендикуляр тэнхлэгийн эхнээс тэгшилнэ; flex-end - элементүүд нь перпендикуляр тэнхлэгийн төгсгөлөөс зэрэгцсэн; төв - элементүүд нь төвд байрласан; үндсэн шугам - элементүүдийг суурь шугамын дагуу байрлуулна; сунгах - элементүүдийг сунгаж, перпендикуляр тэнхлэгийн дагуух бүх зайг эзэлдэг (үндсэн утга).

уян хатан эхлэл , уян хатан төгсгөл

суурь, сунгах

Өөрийгөө тэгшлэх

align-self нь мөн перпендикуляр тэгшитгэлийг хариуцдаг боловч тус тусдаа уян хатан элементүүдэд тохируулагдсан байдаг.

Өөрийгөө тэгшлэх боломжит утгууд:

auto нь анхдагч утга юм. Элемент нь эх элементийн align-зүйлүүдийг ашигладаг болохыг заана; flex-start - элемент нь перпендикуляр тэнхлэгийн эхэн үеэс зэрэгцсэн; flex-end - элемент нь перпендикуляр тэнхлэгийн төгсгөлөөс зэрэгцсэн; төв - элемент нь төвд зэрэгцсэн; суурь шугам - элемент нь үндсэн шугамын дагуу байрласан; сунгах - элемент нь сунасан, бүх өндрийн орон зайг эзэлдэг.

Агуулга зэрэгцүүлэх

Олон мөрт уян контейнер дотор тэгшлэлтийг хянахын тулд align-content шинж чанар байдаг.

Боломжит утгууд:

flex-start - элементүүд нь үндсэн тэнхлэгийн эхнээс зэрэгцсэн; flex-end - элементүүд нь үндсэн тэнхлэгийн төгсгөлөөс зэрэгцсэн; төв - элементүүд нь үндсэн тэнхлэгийн төвд нийцсэн; хоорондын зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, хоорондоо чөлөөт зайг хуваарилдаг; эргэн тойрон дахь орон зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, тэдгээрийн эргэн тойронд чөлөөт орон зайг хуваарилдаг; сунгах - бүх өндрийг дүүргэхийн тулд элементүүдийг сунгасан (үндсэн утга).

уян хатан эхлэл , уян хатан төгсгөл

төв, сунгах

зай-хоорондоо, орон зай-ойролцоо

Жич:Би хэзээ ч зарим зүйлийг ажиллаж байгааг харж чадаагүй, жишээлбэл, шугамын уян хатан урсгал: баганын боодол эсвэл ижил уян хатан чиглэлийн бүрэн оруулга: багана; уян хатан боолт: боох; .

Элементүүд баганад байгаа боловч шилжүүлэгдээгүй:

ороох нь уян хатан чиглэлтэй ажиллахгүй: багана; , хэдийгээр техникийн үзүүлэлтэд дараах байдалтай харагдаж байна.

Энэ нь цаг хугацааны явцад ажиллах болно гэж бодож байна.

2014 оны 06-р сарын 21-ний өдрийн UPD:Хэрэв та блокийн өндрийг тохируулбал бүх зүйл ажиллана. Зөвлөгөө өгсөнд баярлалаа

Энэ нийтлэлд бид вэб хуудасны уян хатан байрлалыг бий болгоход зориулагдсан CSS Flexbox технологийг танилцуулах болно.

CSS Flexbox технологийн хөтчийн дэмжлэг

Flexbox технологийг одоо ашиглаж байгаа бараг бүх хөтчүүд аль хэдийн дэмждэг болсон (утгалтуудыг ашиглан: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+). .

Flexbox-ийн үндсэн ойлголт (Сүлжээ)

Flexbox нь сүлжээнд суурилсан. Энэ нь зөвхөн 2 элементээс бүрдэнэ. Эхний элемент нь уян хатан сав. Флекс контейнер үүсгэх нь шаардлагатай HTML элементэд flex эсвэл flex-inline утга бүхий CSS дэлгэцийн шинж чанарыг нэмэх замаар хийгддэг.

Үүний дараа уян хатан савны бүх шууд хүүхдүүд(хүүхдүүд) автоматаар болдог уян хатан элементүүд(2-р flexbox сүлжээ элемент).

HTML тэмдэглэгээ:

Flex-container (дэлгэц: flex; /* flex || inline-flex */ ) Flexbox сүлжээний бүтэц

Flex зүйлүүд нь анхдагчаар уян хатан савны өндрийг бүхэлд нь эзэлдэг.

Флекс эсвэл flex-inline-ийн утга нь хэрхэн хийхийг тодорхойлдог уян хатан савхуудсан дээр танилцуулах болно. гэж төлөөлөх шаардлагатай бол блок, дараа нь уян хатан утгыг ашиглана уу. Хэрэв элементийг төлөөлөх шаардлагатай бол жижиг үсгээр, дараа нь flex-inline утгыг ашиглана уу. Энэ тохиолдолд түүний элементүүдийг харуулахад шаардагдах хэмжээний хуудасны зай эзэлнэ.

Flex элементийн тэгшлэх чиглэл

Флекс савны доторх уян элементүүдийн зэрэгцүүлэх чиглэлийг тодорхойлохдоо ашиглан гүйцэтгэнэ тэнхлэгүүд.

Flexbox-д тэд хуваарилдаг 2 тэнхлэг. Эхний тэнхлэгийг нэрлэдэг үндсэнэсвэл гол(анхдагчаар баруун тийш чиглэсэн). Хоёрдугаарт - хөндлөн(өгөгдмөл байдлаар доош).

Уян саванд байгаа зүйлсийг хангалттай зай байхгүй байсан ч нэг мөрөнд (анхдагчаар) байрлуулна. Уян элементүүд нь үндсэн тэнхлэгийн дагуу уян хатан саванд байрладаг.

Саванд байгаа элементүүдийн өгөгдмөл зохицуулалт (уян саванд хангалттай зайгүй уян хатан зүйлүүд түүний гадна талд унадаг)

CSS Flexbox дээр уян хатан зүйлсийг шинэ мөрөнд шилжүүлэхийг зөвшөөрөх (хэрэв тэдгээр нь одоогийн мөрөнд хангалттай зай байхгүй бол) CSS flex контейнерийн flex-wrap шинж чанарыг wrap эсвэл wrap-reverse гэж тохируулснаар хийгддэг.

Flex-wrap: боох; /* nowrap (нэг мөрөнд - өгөгдмөл) боох (шинэ мөрөнд уян хатан зүйлсийг боохыг зөвшөөрөх) боох-урвуу (уян хатан зүйлсийг урвуу дарааллаар боох) */

Flex-wrap CSS шинж чанарын ороох болон боох-урвуу утгууд нь хөндлөн тэнхлэгийн чиглэлийг тодорхойлдог.

Flexbox-ын үндсэн тэнхлэгийн чиглэлийг тохируулах нь flex-direction CSS шинж чанарыг ашиглан хийгддэг.

уян хатан чиглэл: эгнээ; /* мөр (баруун) - анхдагч мөр-урвуу (зүүн) багана (доош) багана-урвуу (дээш) */

Энэ өмчийг ашиглан уян хатан элементүүдийг хэвтээ (мөрөөр) биш, харин босоо (баганаар) байрлуулсан эсэхийг шалгах боломжтой.

Flex-direction болон flex-wrap шинж чанаруудыг ерөнхий CSS flex-flow шинж чанарыг ашиглан тодорхойлж болно:

Flex-flow: row nowrap; /* 1 утга - уян хатан чиглэл, 2 утга - flex-wrap */

Уян эд зүйлсийг зэрэгцүүлж байна

Flexbox-д савны доторх элементүүдийн зэрэгцүүлэлтийг хоёр чиглэлд (тэнхлэг) гүйцэтгэдэг.

Үндсэн тэнхлэгийн дагуу уян хатан зүйлсийг зэрэгцүүлэх

Үндсэн тэнхлэгийн дагуу элементүүдийг зэрэгцүүлэх нь justify-content CSS шинж чанарыг ашиглан хийгддэг:

зөвтгөх-агуулга: уян хатан эхлэл; /* flex-start (flex элементүүд нь тэнхлэгийн эхэн үетэй харьцуулахад зэрэгцэн оршдог) – анхдагчаар flex-end (уян элементүүд нь тэнхлэгийн төгсгөлтэй харьцуулахад зэрэгцдэг) төв (flex контейнерийн төвд) хоорондын зай (тэгш, өөрөөр хэлбэл уян элементүүдийн хооронд ижил зайтай) зай эргэн тойронд (тэгш, гэхдээ эхний уян элементийн өмнө болон сүүлчийнх нь дараа хагас зайг нэмнэ) */ Үндсэн тэнхлэгийн дагуу уян хатан элементүүдийг зэрэгцүүлэх сонголтууд

Хөндлөн тэнхлэгийн дагуу уян хатан зүйлсийг тэгшлэх

Хөндлөн тэнхлэгийн дагуу уян хатан саванд байгаа уян хатан зүйлсийг зэрэгцүүлэх нь align-items CSS шинж чанарыг ашиглан хийгддэг:

Зүйлүүдийг тэгшлэх: сунгах; /* сунах (хөндлөн тэнхлэгийн бүх уртын дагуу сунгах) - анхдагчаар flex-start (хөндлөн тэнхлэгийн эхлэлтэй харьцуулахад) flex-end (хөндлөн тэнхлэгийн төгсгөлтэй харьцуулахад) суурь шугам (суурь шугамтай харьцуулахад) ) төв */ Хөндлөн тэнхлэгийн дагуу уян хатан элементүүдийг зэрэгцүүлэх сонголтууд

Уян савны шугамыг тэгшлэх

CSS Flexbox нь зөвхөн уян хатан элементүүдийг төдийгүй тэдгээрийн байрлах шугамуудыг зэрэгцүүлэх боломжийг олгодог.

Align-content: stretch /* stretch (хөндлөн тэнхлэгийн бүх уртын дагуу сунгасан) – анхдагчаар flex-start (хөндлөн тэнхлэгийн эхлэлтэй харьцуулахад) flex-end (хөндлөн тэнхлэгийн төгсгөлтэй харьцуулахад) төв ( төвд) зай-хоорондоо (нэг жигд, өөрөөр хэлбэл, шугамын хоорондох зай ижил) эргэн тойронд зай (тэгш, гэхдээ эхний мөрийн өмнө болон сүүлчийн мөрийн дараа хагасыг нэмж) */ Уян савны шугамыг тэгшлэх сонголтууд

Align-content шинж чанар нь уян хатан саванд байгаа уян хатан зүйлүүд олон мөрөнд байрлах үед л ашиглах нь утга учиртай. Үүнийг хийхийн тулд нэгдүгээрт, бүх уян хатан элементүүдийн өргөн нь уян хатан савны өргөнөөс их байх шаардлагатай, хоёрдугаарт, уян хатан сав нь flex-wrap CSS шинж чанарыг боох эсвэл эргүүлэх тохиргоотой байх ёстой.

align-self CSS шинж чанар

Align-self шинж чанар нь өмнөх шинж чанаруудаас ялгаатай (justify-content, align-items болон align-content) нь уян хатан элементүүдэд зориулагдсан. Энэ нь таныг өөрчлөх боломжийг олгодог уян хатан элементийн тохируулгахөндлөн тэнхлэгийн чиглэлийн дагуу. Align-self шинж чанар нь align-items-тэй ижил утгыг авч болно.

Зүйлүүдийг тэгшлэх: сунгах; /* автомат (анхдагч) || сунгах || flex-start || уян хатан төгсгөл || суурь || төв */

Flex-container (дэлгэц: flex; өргөн: 300px; өндөр: 150px; align-itements: center; padding: 10px; background-color: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 ( flex-basis: 70px; text-align: center; padding: 15px; font-size: 30px; ) .flex-container_element-1 ( align-self: flex-start; дэвсгэр: #fe4; ) .flex-container_element-2 ( align-self: flex-end; background: pink; ) .flex-container_element-3 (align-self: stretch; background: lime; ) .flex-container_element-4 ( align-self: auto; background: cyan; ) CSS align-self шинж чанар хэрхэн ажилладаг

Уян эд зүйлсийн дарааллыг өөрчлөх

Анхдагч байдлаар, уян хатан зүйлүүд нь HTML кодонд гарч ирэх дарааллаар flex контейнерт харагдана. CSS Flexbox дахь зарим уян хатан элементүүдийн дарааллыг бусадтай харьцуулахад өөрчлөхийн тулд та order шинж чанарыг ашиглаж болно. Энэхүү CSS шинж чанар нь уян хатан саванд уян хатан элементүүдийг тоогоор нь өсөх дарааллаар байрлуулдаг.

Захиалга: 0; /* 0 (анхдагч) эерэг эсвэл сөрөг бүхэл тоо */

Жишээлбэл:

...

CSS: .flex-container ( display: flex; ) /* 2-р уян элементийг эцэс хүртэл зөөнө */ .flex-container_element-2 ( захиалга: 2; ) /* 3-р элементийг 2 руу зөөнө */ .flex-container_element-3 ( захиалга: 1; ) /* 1-ийн өмнө 4 уян элементийн байрлал */ .flex-container_element-4 ( дараалал: -1; ) CSS тушаалын шинж чанар хэрхэн ажилладаг

Уян элементийн өргөнийг хянах

Flexbox нь уян хатан элемент хэр өргөн болохыг тодорхойлдог CSS хэд хэдэн шинж чанартай байдаг.

CSS шинж чанарын уян хатан суурь

Энэ өмч нь зориулагдсан уян хатан элементийн анхны өргөнийг тохируулах. Та px, %, em гэх мэт янз бүрийн хэмжигдэхүүнийг ашиглан өргөний утгыг тохируулж болно. Анхдагчаар энэ шинж чанарыг автоматаар тохируулсан байна (энэ тохиолдолд элементийн өргөнийг түүний агуулгад үндэслэн автоматаар тооцоолох болно) .

Уян хатан зүйлийн эцсийн өргөнийг тодорхойлно flex-grow болон flex-shrink CSS шинж чанаруудын утгуудаас хамааран зөвхөн энэ элементэд төдийгүй энэхүү уян хатан савны бусад уян хатан элементүүдэд зориулагдсан болно.

flex-grow CSS өмч

Энэ өмч нь эсэхийг тодорхойлдог уян хатан элементийн анхны өргөн нэмэгддэг (өсдөг). Уян элементийн өргөнийг нэмэгдүүлэх нь дараах байдлаар хийгддэг чөлөөт шугамын зай. flex-grow CSS өмчийн үнэ цэнэ нь бүхэл тоо. Энэ утга нь (хэрэв энэ нь 1-ээс их эсвэл тэнцүү бол) уян хатан элемент нь чөлөөт орон зайн аль хэсгийг авахыг тодорхойлдог.

Жишээлбэл:

...

CSS: .flex-container (дэлгэц: flex; өргөн: 600px; ) .flex-container_element-1 ( flex-basis: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-basis: 40% flex-grow: 4 ) CSS шинж чанар flex-grow хэрхэн ажилладаг

Энэ жишээнд уян хатан зүйлүүд нэг мөрөнд байрлаж, сул зай байгаа бол (600×(1-0.8)=120px):

Энэ зайны 1/5 нь element.flex-container_element-1-ийн өргөнд нэмэгдэх болно (120×1/5=24px);
Энэ зайны 4/5 нь элементийн өргөнд нэмэгдэх болно.flex-container_element-2 (120×4/5=96px).

Өөрөөр хэлбэл, flex-grow CSS шинж чанар нь уян хатан элементийн өргөн нь өсөх боломжтойг зааж өгөхөөс гадна бусад элементүүдтэй харьцуулахад энэ утгыг хэр хэмжээгээр өсөх боломжтойг зааж өгөх боломжийг олгодог.

Анхдагчаар, CSS-ийн flex-grow шинж чанарыг 0 болгож тохируулсан байна. Энэ нь уян хатан элемент ургах боломжгүй (өргөнөө нэмэгдүүлэх) гэсэн үг юм.

flex-shrink CSS шинж чанар

Энэ шинж чанар нь уян хатан элементийн өргөнийг багасгах боломжтой эсэхийг тодорхойлдог. Уян элементийн өргөнийг багасгах нь зөвхөн тохиолдолд л болно шугамын өргөн нь бүх уян хатан зүйлсийг харуулахад хангалтгүй байх болнодотор нь байрладаг. Шаардлагатай өргөнийг тооцоолно анхны өргөн дээр үндэслэсэн, бүх уян хатан элементийг агуулсан.

Жишээлбэл:

...

CSS: .flex-container (дэлгэц: flex; өргөн: 500px; ) .flex-container_element-1 ( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2 ( flex-basis: 300px; -shrink: 3 ) CSS шинж чанар flex-shrink хэрхэн ажилладаг

Флекс савны өргөн нь 500px. Flex зүйлсийг харуулахын тулд 600px шаардлагатай. Үүний үр дүнд 100px байхгүй байна. Энэ жишээнд 2 уян элементийг (.flex-container_element-1 ба .flex-container_element-2) багасгаж болно. Энэ тохиолдолд эхний уян хатан элемент.flex-container_element-1-ийн өргөн нь 300 – 1/4*100= 275px байх болно. Хоёрдахь уян хатан элементийн өргөн.flex-container_element-2 энэ тохиолдолд 300 – 3/4*100= 225px байх болно.

Өгөгдмөл утга:

уян хатан агшилт: 1;

Хэрэв чамд хэрэгтэй бол уян хатан элементийн өргөнийг багасгахаас сэргийлнэ, дараа нь та flex-shrink шинж чанарын утга болгон 0 тоог зааж өгөх ёстой.

CSS уян хатан шинж чанар

flex-grow, flex-shrink болон flex-basis-ийг хялбархан тохируулахын тулд та flex CSS шинж чанарыг ашиглаж болно.

Өгөгдмөл утга:

Flex: 0 1 автомат; /* 0 - flex-grow (1-р утга) 1 - flex-shrink (2-р утга) auto - flex-basis (3-р утга) */

CSS Flexbox ашиглан хуудасны зохион байгуулалт

Энэ хэсэгт бид Flexbox ашиглан энгийн хариу үйлдэл үзүүлэх загвар үүсгэх болно.

Байршлын бүтэц нь 3 хэсгээс бүрдэнэ.

толгой (толгой болон үндсэн цэсийг харуулах);
үндсэн (үндсэн хэсгийг харуулах);
хөл (хөл хэсэгт).

Үндсэн хэсэг нь эргээд 2 хэсэгт хуваагдах болно (бид тэдгээрийг CSS Flexbox ашиглан байрлуулах болно). Том дэлгэц дээр (>=992px) эдгээр хэсгүүдийг хэвтээ байдлаар, бусад дэлгэц дээр босоо байдлаар байрлуулна.<992px).

[Хуудасны толгой хэсэг...]

[Гол хэсэг...]

CSS: /* контейнер (харах цонхны өргөнөөс хамаарч блокийн өргөнийг тохируулна) */ .container (байрлал: харьцангуй; зүүн-зүүн: автомат; захын баруун: автомат; padding-right: 15px; padding-left: 15px; ) @ media (мин-өргөн: 576px) ( .container ( өргөн: 540px; хамгийн их өргөн: 100%; ) ) @media (мин-өргөн: 768px) ( .container ( өргөн: 720px; хамгийн их өргөн: 100%; ) ) @media (мин-өргөн: 992px) ( .container (өргөн: 960px; хамгийн их өргөн: 100%; ) ) @media (мин-өргөн: 1200px) ( .container ( өргөн: 1140px; хамгийн их өргөн: 100 % ); ms-flex-wrap: wrap; margin-left: -15px; min-height: 1px padding-right: 15px padding-left: 15px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; уян хатан: 0 0 100%; хамгийн их өргөн: 100%; ) /* нийтлэлийн өргөн ба том дэлгэцийн хажуугийн блокууд */ @media (мин-өргөн: 992px) ( /* савны өргөний 2/3 нь */ .main_article ( -webkit-box-flex: 0; -webkit-flex 0 0 66.66667%; -ms-flex: 0 0 66.66667%; 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.33333%;

Ихэнх хөтчүүдийн байршлыг дэмжихийн тулд бид CSS-д шаардлагатай угтвар болон хамгийн их өргөнийг нэмнэ.

Блокыг уян хатан сав болгон "эргүүлэх" тулд бид row-flex классыг ашиглана. Бид flex CSS шинж чанарыг ашиглан уян хатан савны дотор уян хатан элемент бүрийн өргөнийг (үндсэн_ нийтлэл ба үндсэн_ хажууд) тохируулах болно.

Жишээлбэл, Flexbox-ыг ашиглан "Хөл хэсэг" блок болон үндсэн нийтлэлийн "Сайт дээрх сонирхолтой зүйлс" хэсгийг тэмдэглэе.

Бид "Footer" хэсгийг 4 тэнцүү хэсэгт (нэг хэсгийн хамгийн бага өргөн нь 200px), "Сайт дээрх сонирхолтой зүйлс" -ийг 3 хэсэгт (нэг хэсгийн хамгийн бага өргөн нь 300px) хуваана.

[Хуудасны толгой хэсэг...]

[Гол хэсэг...]

[1 өөр...]

[2 өөр...]

[3 өөр...]

Нэмэлт CSS:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-эерэг: 1 flex-grow: max-width: 100% )

Модуль Flexbox зохион байгуулалт(уян хатан хайрцаг - одоогоор W3C нэр дэвшигчийн зөвлөмж) нь хэмжээ нь тодорхойгүй ба/эсвэл динамик (тиймээс "уян хатан" гэсэн үг) байсан ч савны элементүүдийн хоорондын зайг байрлуулах, зэрэгцүүлэх, хуваарилах илүү үр дүнтэй аргыг хангах зорилготой юм. .

Уян хатан зохион байгуулалтын гол санаа нь саванд орон зайг хамгийн сайн дүүргэхийн тулд (ихэнх тохиолдолд бүх төрлийн дэлгэц, дэлгэцийн хэмжээг дэмжих) элементүүдийн өргөн / өндрийг (болон дарааллыг) өөрчлөх боломжийг олгох явдал юм. Уян сав нь орон зайг дүүргэхийн тулд элементүүдийг сунгаж эсвэл халихаас сэргийлж шахдаг.

Хамгийн чухал нь flexbox-ын зохион байгуулалт нь ердийн зохион байгуулалтаас ялгаатай нь чиглэлээс хамааралгүй (хайрцагуудыг босоо байдлаар байрлуулж, доторлогооны элементүүдийг хэвтээ байдлаар байрлуулсан). Байнгын зохион байгуулалт нь вэб хуудасны хувьд маш сайн боловч том эсвэл нарийн төвөгтэй програмуудыг (ялангуяа дэлгэцийн чиглэлийг өөрчлөх, хэмжээг өөрчлөх, сунгах, багасгах гэх мэт) дэмжих уян хатан чанаргүй (ялангуяа үг хэллэг байхгүй).

Сэтгэгдэл: Flexbox layout нь хэрэглээний бүрэлдэхүүн хэсгүүд болон жижиг хэмжээний байршилд хамгийн тохиромжтой байдаг бол Grid layout нь том хэмжээний байршилд илүү ашиглагддаг.

Үндсэн мэдээлэл

Учир нь flexbox нь зөвхөн нэг өмч биш бүхэл бүтэн модуль бөгөөд олон шинж чанарыг нэгтгэдэг. Тэдгээрийн заримыг нь саванд хийх ёстой (эцэг эх элемент гэж нэрлэгддэг уян хатан сав), бусад шинж чанарууд нь хүүхэд элементүүдэд хамаарна, эсвэл уян хатан элементүүд.

Хэрэв ердийн зохион байгуулалт нь блок болон доторлогооны элементүүдийн урсгалын чиглэлд суурилдаг бол уян хатан байрлал нь "уян хатан урсгалын чиглэл" дээр суурилдаг. Энэ диаграммыг flex layout-ийн үндсэн санааг тайлбарласан үзүүлэлтээс үзнэ үү.

Үндсэндээ элементүүдийг аль нэгээр нь тараах болно үндсэн тэнхлэг(аас үндсэн эхлэлөмнө үндсэн төгсгөл), эсвэл хамт хөндлөн тэнхлэг(аас хөндлөн эхлэлөмнө хөндлөн төгсгөл).

үндсэн тэнхлэг- уян хатан элементүүд байрладаг үндсэн тэнхлэг. Энэ нь хэвтээ байх албагүй гэдгийг анхаарна уу, энэ бүхэн уян хатан чиглэлийн шинж чанараас хамаарна (доороос харна уу).
үндсэн эхлэл | үндсэн төгсгөл- уян хатан элементүүдийг үндсэн эхлэлээс үндсэн төгсгөл хүртэл саванд хийнэ.
үндсэн хэмжээ- сонгосон үндсэн утгаас хамааран уян хатан элементийн өргөн эсвэл өндөр. Үндсэн хэмжигдэхүүн нь элементийн өргөн эсвэл өндөр байж болно.
хөндлөн тэнхлэг- гол тэнхлэгт перпендикуляр хөндлөн тэнхлэг. Түүний чиглэл нь үндсэн тэнхлэгийн чиглэлээс хамаарна.
хөндлөн эхлэл | хөндлөн төгсгөл- уян хатан шугамыг элементүүдээр дүүргэж, хөндлөн эхлэх байрлалаас хөндлөн төгсгөл хүртэл саванд хийнэ.
хөндлөн хэмжээ- сонгосон хэмжээсээс хамааран уян хатан элементийн өргөн эсвэл өндөр нь энэ утгатай тэнцүү байна. Энэ шинж чанар нь сонгосон хэмжээсээс хамааран элементийн өргөн эсвэл өндөртэй ижил байна.

Үл хөдлөх хөрөнгө

дэлгэц: flex | inline-flex;

Үүнд хамаарна:

Флекс савыг (сонгосон утгаас хамааран шугаман эсвэл блок) тодорхойлно, бүх шууд хүүхдэд зориулсан уян хатан контекстийг холбоно.

дэлгэц: бусад утгууд | уян хатан | inline-flex;

Санаарай:

CSS баганууд уян хатан контейнертэй ажиллахгүй байна
float , clear, vertical-align нь уян хатан зүйлтэй ажиллахгүй