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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

уян хатан ургаххэд хэдэн эх сурвалж дээр энэ нь огт буруу тайлбартай байдаг. Энэ нь саванд байгаа элементүүдийн хэмжээсийн харьцааг тогтоодог гэж хэлдэг. Үнэндээ энэ нь үнэн биш юм. Хэрэв байгаа бол энэ шинж чанар нь тухайн элементийн өсгөлтийн коэффициентийг тодорхойлдог чөлөөт зайсаванд. Анхдагч байдлаар, энэ шинж чанар нь 0 утгатай байна. Бидэнд 500 пикселийн өргөнтэй уян хатан контейнер байгаа гэж төсөөлөөд үз дээ, дотор нь тус бүр нь 100 пикселийн өргөнтэй хоёр уян хатан зүйл байна. Энэ нь саванд өөр 300px хоосон зай үлдээдэг. Хэрэв бид flex-grow гэж зааж өгвөл: 2; эхний элементийн хувьд, 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; дэлгэц: уян хатан; уян хатан чиглэл: багана; уян хатан: автомат; ) .толгой (өргөн: 100%; хамгийн их өргөн: 960px; хамгийн бага өргөн: 430px; зах: 0 автомат 30px; дүүргэлт : 30px 0 10px; дэлгэц: -webkit-flex; дэлгэц: flex; flex-wrap: боох; зөвтгөх-агуулга: хоорондын зай; хайрцагны хэмжээ: хилийн хайрцаг; ) .main ( өргөн: 100%; хамгийн их өргөн : 960px; мин-өргөн: 430px; захын зай: автомат; flex-grow: 1; хайрцагны хэмжээ: хилийн хайрцаг; ) .footer (арын дэвсгэр: #222; өргөн: 100%; хамгийн их өргөн: 960px; мин-өргөн : 430px; өнгө: #eee; захын зай: автомат; дүүргэлт: 15px; хайрцагны хэмжээ: хилийн хайрцаг; )

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

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

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

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

Хайрцаг ( үсгийн хэмжээ: 1.25rem; мөрийн өндөр: 1.5; үсгийн хэв маяг: налуу; захын зай: 0 0 40px -50px; дэлгэц: -webkit-flex; дэлгэц: уян хатан; flex-wrap: боох; зөвтгөх-контент: төв; ) .box-base (зүүн талын зах: 50px; уян хатан: 1 0 430px; ) .хайрцагны тал (зүүн талын зай: 50px; уян хатан: байхгүй; ) .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; flex-wrap: ороох; ) .grid-img (маржин: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(seven) .grid-img ( зах: 0 0 0 30px; дараалал: 2; ) .grid-itm:nth-child(сонд) .grid-img ( маржин: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title (текстийг зэрэгцүүлэх: зүүн; ) ) @media дэлгэц ба (хамгийн их өргөн: 600px) ( .grid-img (дэлгэц: байхгүй; ) )

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

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

Flexbox нь эцэг эхийн уян хатан контейнер болон хүүхдийн уян хатан зүйлсийн шинж чанаруудыг нэгтгэдэг.

Элемент нь уян хатан контейнер болохын тулд үүнийг хуваарилах ёстой дэлгэц: уян хатан;эсвэл дэлгэц: inline-flex;(тус тус бүр блок эсвэл шугам).

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

Уян савны шинж чанарууд
уян хатан чиглэл	Үндсэн тэнхлэгийн чиглэлийг тодорхойлно. Боломжит утгууд: эгнээ– зүүнээс баруун тийш (анхдагчаар); эгнээ-урвуу- баруунаас зүүн тийш; багана- дээрээс доош; багана-урвуу- доошоо дээш.
уян хатан боолт	Сав нь олон шугамтай эсэхийг тодорхойлно. Боломжит утгууд: одоо rap– уян хатан элементүүдийг нэг мөрөнд байрлуулсан, хэрэв тэдгээр нь саванд багтахгүй бол түүний хил хязгаараас давж гардаг (анхдагчаар); боох– уян хатан элементүүд нь нэг мөрөнд тохирохгүй бол хэд хэдэн мөрөнд жагсаагдсан; боох-урвуу- тэй төстэй боох, гэхдээ шилжүүлэг нь доороос дээш явагдана.
уян хатан урсгал	flex-direction болон flex-wrap гэсэн хоёр параметрийг нэг дор тодорхойлно. Жишээлбэл, flex-flow: баганын боолт;
зөвтгөх-агуулга	Гол тэнхлэгийн дагуух элементүүдийн тэгш байдлыг тодорхойлно. Боломжит утгууд: уян хатан эхлэл– уян хатан элементүүдийг үндсэн тэнхлэгийн эхэнд дардаг (анхдагчаар); уян хатан төгсгөл– уян хатан элементүүд нь үндсэн тэнхлэгийн төгсгөлд дарагдсан; төв– уян хатан элементүүд нь үндсэн тэнхлэгийн төвтэй зэрэгцсэн; зай - хооронд– уян хатан элементүүдийг үндсэн тэнхлэгийн дагуу тарааж, эхний элементийг тэнхлэгийн эхэнд, сүүлчийнх нь төгсгөл хүртэл дардаг; орон зай - эргэн тойронд– уян хатан элементүүд нь үндсэн тэнхлэгийн дагуу тархсан бөгөөд чөлөөт зай нь элементүүдийн хооронд тэнцүү хуваагдана. Гэхдээ зайнууд нэмэгдэж, элементүүдийн хоорондох зай нь савны ирмэг ба хамгийн гадна талын элементүүдийн хоорондох зайнаас хоёр дахин их байгааг тэмдэглэх нь зүйтэй.
зэрэгцүүлэх	Хөндлөн тэнхлэгийн дагуух элементүүдийн тэгш байдлыг тодорхойлно. Боломжит утгууд: уян хатан эхлэл– уян хатан элементүүдийг хөндлөн тэнхлэгийн эхэнд дардаг (анхдагчаар); уян хатан төгсгөл– уян хатан элементүүд нь хөндлөн тэнхлэгийн төгсгөлд дарагдсан; төв– уян хатан элементүүдийг хөндлөн тэнхлэгийн төв рүү чиглүүлсэн; суурь– уян хатан элементүүд нь үндсэн шугамын дагуу байрласан байна. Суурь шугам нь "d", "r", "ts", "sch" үсгүүдийн үсгүүдийн хэт давхцлыг харгалзахгүйгээр тэмдэгтүүдийн доод ирмэгийн дагуу гүйсэн төсөөллийн шугам юм; сунгах– уян хатан элементүүд нь хөндлөн тэнхлэгийн дагуу байгаа бүх зайг эзэлдэг. Гэхдээ хэрэв элементүүд нь өгөгдсөн өндөртэй бол сунгахүл тоомсорлох болно.
нийцүүлэх-агуулга	Уян эд зүйлсийн бүхэл эгнээний хөндлөн тэнхлэгийн тэгшитгэлийг тодорхойлно. Боломжит утгууд: уян хатан эхлэл– уян хатан элементүүдийн эгнээ хөндлөн тэнхлэгийн эхэнд дарагдсан (анхдагчаар); уян хатан төгсгөл– уян хатан элементүүдийн эгнээ нь хөндлөн тэнхлэгийн төгсгөлд дарагдсан; төв– уян хатан элементүүдийн эгнээ нь хөндлөн тэнхлэгийн төвд нийцсэн; зай - хооронд– уян хатан элементүүдийн эгнээ нь хөндлөн тэнхлэгийн дагуу тархсан бөгөөд эхний эгнээ нь тэнхлэгийн эхэнд, сүүлчийнх нь төгсгөл хүртэл дарагдсан; орон зай - эргэн тойронд– уян хатан элементүүдийн эгнээ нь хөндлөн тэнхлэгийн дагуу тархсан бөгөөд чөлөөт зай нь эгнээ хооронд тэнцүү хуваагдана. Гэхдээ зай нэмэгдэж, мөр хоорондын зай нь савны ирмэг ба хамгийн гадна талын шугамын хоорондох зайнаас хоёр дахин их байгааг тэмдэглэх нь зүйтэй. сунгах– уян хатан элементүүдийн эгнээ сунгаж, хөндлөн тэнхлэгийн дагуу байгаа бүх зайг эзэлнэ. Гэхдээ хэрэв элементүүд нь өгөгдсөн өндөртэй бол сунгахүл тоомсорлох болно. Энэ өмч нь нэг шугамын уян хатан саванд ажиллахгүй.

Flex элементийн шинж чанарууд
захиалга	Флекс контейнер дотор нэг уян элемент гарч ирэх дарааллыг тодорхойлно. Бүхэл тоо гэж тодорхойлсон. Анхдагч нь 0, дараа нь элементүүд нь байгалийн урсгалын дарааллаар бие биенээ дагадаг. Утга захиалгатухайн элементийн үнэмлэхүй байрлалаас илүү дараалал дахь байрлалын жинг заана.
уян хатан суурь	Контейнер дотор зай гаргахаас өмнө уян хатан зүйлийн үндсэн хэмжээг тодорхойлно. px, %, em болон бусад хэмжих нэгжээр зааж өгч болно. Үндсэндээ энэ нь элементийг сунгах эсвэл шахахтай холбоотой эхлэлийн цэг юм. Өгөгдмөл утга - авто, дотоод агуулгын хэмжээнээс хамаарч элементийн хэмжээтэй.
уян хатан ургах	Савны доторх уян хатан зүйл нь үндсэн хэмжээндээ хэр их зай эзлэхийг тодорхойлдог. Пропорцын үүрэг гүйцэтгэх бүхэл тоогоор тодорхойлогддог. Анхдагч нь 0. Хэрэв бүх элементүүд уян хатан: 1, тэгвэл тэд бүгд ижил хэмжээтэй байх болно. Хэрэв та нэг уян хатан зүйлийг 2 болговол энэ нь үндсэн хэмжээнээсээ бусадтай харьцуулахад хоёр дахин нэмэгдэх болно.
уян хатан агшилт	Хэрвээ хангалттай зай байхгүй бол уян хатан савны доторх хөрш зэргэлдээ элементүүдийн бууралттай харьцуулахад уян хатан элемент хэр их хэмжээгээр агшихыг тодорхойлдог. Пропорцын үүрэг гүйцэтгэх бүхэл тоогоор тодорхойлогддог. Анхдагч нь 1. Хэрэв нэг уян хатан элементийг тохируулсан бол уян хатан: 2, дараа нь сав нь түүнд агуулагдах элементүүдийн үндсэн хэмжээнүүдийн нийлбэрээс бага байвал түүний үндсэн хэмжээнээс бусад хэмжээнээс хоёр дахин ихийг хасах болно.
уян хатан	flex-grow, flex-shrink, flex-basis гэсэн гурван параметрийг нэг дор тодорхойлно. Жишээлбэл, flex: 1 1 200px;
өөрийгөө тэгшлэх	Өгөгдмөл зэрэгцүүлэлтийг дарна уу эсвэл зэрэгцүүлэх, тодорхой уян хатан элементийн хувьд. Боломжит утгууд: уян хатан эхлэл– уян хатан элемент нь хөндлөн тэнхлэгийн эхэнд дарагдсан (анхдагчаар); уян хатан төгсгөл– уян хатан элемент нь хөндлөн тэнхлэгийн төгсгөлд дарагдсан; төв– уян хатан элемент нь хөндлөн тэнхлэгийн төвтэй зэрэгцсэн; суурь– уян хатан элемент нь үндсэн шугамтай нийцсэн; сунгах– уян хатан элементүүдийг сунгаж, хөндлөн тэнхлэгийн дагуу байгаа бүх зайг эзэлнэ. Харин өндрийг нь өгсөн бол сунгахүл тоомсорлох болно.

Flexbox-ыг практикт ашиглах онцлог

1. Баруун зэрэгцүүлэх

HTML болон CSS зэрэг интернетийн технологи хөгжихийн хэрээр вэб сайт үүсгэх шинэ боломжууд хөгжүүлэгчдийн өмнө байнга нээгдэж байна. Асуудлын нэг бол хөтчүүдийн хуучирсан хувилбарууд хэвээр байна. Энэ нь ихэвчлэн Internet Explorer-д, ялангуяа Windows XP ашигладаг хүмүүст хамаарна.

Интернет хуудасны загвар зохион бүтээгч нь ихэвчлэн хуудсан дээрх CSS блокуудыг зэрэгцүүлэх ажилтай тулгардаг. Жишээлбэл, та бүх блокуудыг нэг нэгээр нь, хэвтээ байдлаар байрлуулж, голд эсвэл савны ёроолд байрлуулж болно. Дэлгэц - flex шинж чанарын параметр гарч ирснээр энэ ажлыг ихээхэн хялбаршуулсан. Энэ технологи нь блок эсвэл контейнер доторх хүүхдийн элементүүдийг байрлуулахад зориулагдсан. Энэ байршлын параметрүүд нь хангалттай юм.

Тиймээс, юуны өмнө та эцэг эхийн савыг бий болгох хэрэгтэй. Тодорхой болгохын тулд эргэн тойронд хүрээ гарч ирэхийн тулд үүнийг бүтээцгээе. Контейнерийн CSS код дараах байдалтай байна.

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
агуулгын тэгшитгэх: сунгах;
}

Гол өмч нь дэлгэц: уян хатан. Хүүхдийн элементүүдийг хэд хэдэн мөрөнд байрлуулахын тулд шинж чанарыг нэмнэ үү - flex-wrap: wrap.

Мөн зөвхөн өмч нийцүүлэх-агуулга css блокуудыг хэрхэн байрлуулах, зэрэгцүүлэхийг зааж өгнө. Параметр сунгахблокуудыг саванд жигд байрлуулах боломжийг олгодог. Үүний зэрэгцээ тэдний өндрийг автоматаар сонгож болно. Энэ юу шиг харагдаж байна? Дотоод блокуудад css-г нэмье.

Контейнер div (
өргөн: 50px;
дэвсгэр: ногоон;
захын зай: 5px;
}

Бид өндрийг зориудаар тогтоодоггүй. HTML код дараах байдлаар харагдаж байна.

Кодын үр дүнг зурагт үзүүлэв.

Хэрэв та блокуудын өндрийг мөн зааж өгвөл юу болох вэ:

Контейнер div (
өргөн: 50px;
өндөр: 50px;
дэвсгэр: ногоон;
захын зай: 5px;
}

Одоо өндрийг нь хасаад блокуудын өргөнийг 100% болгоё.

Контейнер div (
өргөн: 100%;
дэвсгэр: ногоон;
захын зай: 5px;
}

Бид ойлголоо.

Өөр нэг параметр нийцүүлэх-агуулгабайна төвмөн бүх блокуудыг төвд тэгшлэх боломжийг танд олгоно.

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
тэгшлэх контент:төв;
}
.container div(
өргөн: 50px;
өндөр: 50px;
дэвсгэр: ногоон;
захын зай: 5px;
}

Үр дүн:

Өөр сонголт уян хатан төгсгөлшинж чанарууд нийцүүлэх-агуулгасавны ёроолд блокуудыг байрлуулах боломжийг танд олгоно.

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
align-content:flex-end;
}

Параметр уян хатан эхлэлбүх зүйлийг яг эсрэгээр хийх болно.

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
align-content:flex-start;
}

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

CSS кодын хэсэг:

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
align-content:зай хоорондын зай;
}

Үр дүн:

Өмч орон зай - эргэн тойронддээд ба доод хэсэгт хоосон зай нэмнэ. Түүнээс гадна тэдгээр нь тус бүр нь төв дэх хоосон зайны хагастай тэнцүү юм.

Контейнер (
өргөн: 450px;
өндөр: 250px;
хүрээ: 1px хатуу #000000;
дэлгэц: уян хатан;
уян хатан боолт: боох;
тэгшлэх-контент:орой тойрон зай;
}

Тиймээс css өмч нийцүүлэх-агуулгаолон параметртэй: сунгах, flex-start, flex- end, center, space-beween, space-round.

Дээрх жишээнүүдээс харахад css align-content шинж чанарын нэг параметрийг өөрчилснөөр бид flex технологийг ашиглан css блокуудын зэрэгцүүлэлтийг огт өөр аргаар ашигладаг. Энэ код нь Internet Explorer-д 10 хүртэлх хувилбар хүртэл ажиллахгүй.

Энэ нийтлэлд бид вэб хуудасны уян хатан байрлалыг бий болгоход зориулагдсан 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).

Захиалгын шинж чанар нь уян хатан контейнер дотор хүүхэд элементүүд гарч ирэх дарааллыг хянадаг. Анхдагч байдлаар, тэдгээрийг уян хатан саванд анх нэмсэн дарааллаар нь байрлуулна.

Үнэ цэнэ

.flex-зүйл ( захиалга:<целое число>; }

Энэхүү энгийн шинж чанарыг ашиглан HTML кодыг өөрчлөхгүйгээр уян хатан зүйлсийг дахин захиалж болно.

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

уян хатан ургах

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

Үнэ цэнэ

.flex-зүйл (flex-grow:<число>; }

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

Хоёрдахь уян хатан зүйл нь бусад уян хатан зүйлсийн хэмжээтэй харьцуулахад илүү их зай эзэлнэ.

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

уян хатан агшилт

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

Үнэ цэнэ

.flex-зүйл ( flex-shrink:<число>; }

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

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

Сөрөг тоо оруулахыг хориглоно.

уян хатан суурь

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

Үнэ цэнэ

.flex-item ( flex-basis: auto |<ширина>; }

flex-basis нь дөрөв дэх уян хатан зүйлд зориулагдсан бөгөөд түүний анхны хэмжээг зааж өгдөг.

Өгөгдмөл утга:авто.

уян хатан

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

Үнэ цэнэ

.flex-зүйл (flex: байхгүй | автомат | [ ? || ]; }

Өгөгдмөл утга: 0 1 автомат .

Flex нь ердийн хэрэглээнд тодорхойгүй бүрэлдэхүүн хэсгүүдийг зөв тохируулдаг тул W3C нь хувь хүний ​​шинж чанаруудын оронд flex shorthand шинж чанарыг ашиглахыг зөвлөж байна.

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

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

Үнэ цэнэ

.flex-item (align-self: auto | flex-start | flex-end | төв | суурь | сунгах; )

Гурав, дөрөв дэх уян элементүүдийн хувьд align-self шинж чанараар тэгшитгэх тохиргоог дахин тодорхойлсон.