Хэвтээ flexbox цэс. Responsive дизайн хийхэд Flexbox-ыг CSS3 дээр ашиглах
Энэ дугаарт бид хийх болно нөлөө бүхий хэвтээ цэсхулган дээр. Үсгийн дүрсүүдийг холбож, холимог холих горимыг ашиглан давхарга холих горимыг идэвхжүүлцгээе: үржүүлэх, :hover псевдо ангиудыг ашиглах, desplay: flax-тэй танилцах, бүгдийг нь цэвэр CSS3 дээр хийсэн.
HTML дээрх утастай цэс
Архивыг компьютер дээрээ татаж аваад задлаарай. Энэ нь гурван хавтас, хэв маягийн файлууд байрладаг css, дүрс бүхий фонт хавтас, арын дэвсгэрт зориулсан зураг img агуулдаг.
Өөрийн ажиллаж буй хөгжлийн орчиндоо бүх зүйлийг шилжүүлээрэй. Би бүх кодыг phpstorm дээр бичих болно. Би бүх хавтас, файлуудыг хуулж аваад index.html-г нээж, цэсийн хүрээг дүрсэлж эхэлцгээе.
Бид биеийн шошгыг бичдэг
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
Зургийн нэр:
- дэлгүүрийн түрдэг тэрэг
- сервер
- хавтас-нээлттэй
- сонин-о
CSS загвар
Тэмдэглэгээг хийсний дараа бид загвараа үргэлжлүүлнэ. style.css-г үндсэн хэсэгт нээж, фон болон Verdana фонтыг тохируулна уу.
Үндсэн хэсэг(арын дэвсгэр зураг: url("../img/escheresque_ste.png"); фонт-гэр бүл: Вердана; )
Бид цэстэй блокыг дэвсгэр болгож, дээд талд нь 100 пикселээр догол хийнэ. дэлгэцийг бүхэлд нь дүүргэх өргөн.
Dws-цэс( дэвсгэр өнгө: цагаан; захын дээд: 100px; өргөн: 100%; )
Ul блокуудад бид жагсаалтуудыг desplay:flax ашиглан хэвтээ байдлаар жагсааж, дэвсгэрийг арилгаж, justify-content:center ашиглан элементүүдээ голлуулна.
Ul.dws-ul( дэлгэц: flex; padding: 0; justify-content: center; )
Бид LI жагсаалтаас тэмдэглэгээг арилгаж, бүх талаас нь 10 оргилоор догол мөргөдөг.
Li.dws-li (жагсаалтын загвар: байхгүй; дэвсгэр: 10px; )
Холбоосуудын доогуур зураасыг арилгаж, текстийг 18 пиксел хүртэл нэмэгдүүлнэ. тэгээд хар болго.
Li.dws-li a( бичвэр чимэглэл: байхгүй; үсгийн хэмжээ: 18px; өнгө: #000; )
margin-right:10px ашиглан дүрсийг бага зэрэг баруун тийш шилжүүлнэ үү.
Li.dws-li a i( баруун захын зай: 10px; )
Хулганы хөдөлгөөнт дүрс
Бид үндсэн дизайныг хийж дууссаны дараа хулганаар гулгах хөдөлгөөнт дүрс рүү шилжье.
Хулганаа аваачихад тухайн элементийн нэрийг тодотгох нэмэлт псевдо элементүүдийг үүсгэцгээе.
Зүүн талыг дүрсэлж, холбоосуудыг сонгоод li.dws-li a::before псевдо элементийг оноож өгье, хоосон контент бичнэ үү:’’; , 20 зураг өргөн. ба 3 оргил өндөр. хангалттай. Өнгөө тохируулж, блок гарч ирэхийн тулд байрлалыг оноож өгье: холбоосуудтай харьцуулахад; , мөн холбоосууд руу бүрэн байрлуулж, доод тал руу нь буулгаж, зүүн ирмэг рүү дарна уу.
Li.dws-li a( ... байрлал: харьцангуй; ) li.dws-li a::өмнө( ... байрлал: үнэмлэхүй; дээд: 100%; зүүн: 0; )
Энэ блокийг хуулбарлаж, псевдо-элементийн дараа ::-г онооно. Зүүн параметрийг баруун тийш сольж, өөр өнгө сонгоно уу #ff2117 .
Li.dws-li a::after( агуулга: ""; өргөн: 20px; өндөр: 3px; дэвсгэр өнгө: #ff2117; байрлал: үнэмлэхүй; дээд: 100%; баруун: 0; )
Дараа нь бид хулганы хөдөлгөөнт дүрсийг хийдэг. Ли-г сонгоод бага зэрэг бараан дэвсгэртэй болгоно.
Li.dws-li:hover( дэвсгэр өнгө: #e5eae8; )
Үүнийг хийхийн тулд хулган дээр байгаа жагсаалтуудыг сонгоод 50% -ийн өргөнтэй псевдо элемент нэмж, зүүнээс баруун тийш X тэнхлэгийн дагуу хувиргалтыг тохируулна уу. Энэ нь түүний хөдөлгөөнийг өгөх болно.
Li.dws-li: хулганаа ав: өмнө( өргөн: 50%; хувиргах: translateX(100%); )
Бид :: дараа псевдо-элементийн хувьд ижил зүйлийг давтах болно, зөвхөн одоо бид баруунаас зүүн тийш хөдөлгөөнийг тохируулах болно.
Li.dws-li: хулганаа ав: дараа( өргөн: 50%; хувиргах: translateX(-100%); )
Li.dws-li a::before( ... шилжилт: .5с; холих-холимог горим: үржүүлэх; ) li.dws-li a::дараа( ... шилжилт: .5с; холих-холимог горим : үржүүлэх;)
Энэ нь маш сайн болсон, одоо өргөнийг тэг болгож, холбоосыг зөөхдөө улаан өнгө нэмье.
Li.dws-li a:hover( өнгө: #e62117; )
Li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... дээд: 90%; ) li.dws-li a::after( ... дээд: 90 %; )
Нэг ёсондоо би та нарт юу хүсч байгаагаа харуулсан, энэ нь маш сайхан цэс болсон.
Хичээлийг Денис Горелов бэлтгэсэн.
Товчхондоо, Flexbox-ийн зохион байгуулалт нь бидэнд нэг удаа хэцүү асуудлуудын энгийн шийдлүүдийг өгдөг. Жишээлбэл, та элементийг босоо байдлаар байрлуулах, эсвэл дэлгэцийн доод хэсэгт хөлийг дарах, эсвэл бүх хоосон зайг эзлэхийн тулд хэд хэдэн блокуудыг нэг мөрөнд оруулах шаардлагатай үед. Үүнтэй төстэй асуудлуудыг уян хатангүйгээр шийдэж болно. Гэхдээ дүрмээр бол эдгээр шийдлүүд нь "таяг" шиг байдаг - CSS-ийг зориулалтаас өөр зорилгоор ашиглах арга техник юм. Харин flexbox-ийн хувьд ийм даалгавруудыг яг л уян хатан загварт зориулснаар шийддэг.
CSS Flexible Box Layout Module (уян блок бүхий бүдүүвчүүдэд зориулсан CSS модуль), товчоор хэлбэл flexbox нь янз бүрийн өргөн, өндөрт зохицсон HTML загваруудыг бүтээхэд гарсан дутагдлыг арилгах, зохион байгуулалтыг логик, энгийн болгох зорилгоор бүтээгдсэн. . Логик арга нь дүрмээр бол үр дүн нь шалгагдаагүй гэнэтийн газруудад ажилладаг - логик бол бүх зүйл юм!
Flexbox нь савны доторх элементүүдийн төрөл бүрийн параметрүүдийг дэгжин хянах боломжийг олгодог: чиглэл, дараалал, өргөн, өндөр, дагуу болон хөндлөн огтлолцох, чөлөөт зайны хуваарилалт, элементүүдийн суналт, шахалт.
Үндсэн мэдлэг
FlexBox нь Контейнер ба түүний эд зүйлсээс (уян хатан элементүүд) бүрдэнэ.
Flexbox-г идэвхжүүлэхийн тулд аливаа HTML элементэд CSS шинж чанарыг зааж өгөхөд л хангалттай display:flex; эсвэл дэлгэц: inline-flex; .
Флексийн шинж чанарыг идэвхжүүлсний дараа савны дотор хоёр тэнхлэг үүсдэг: үндсэн ба хөндлөн (перпендикуляр (⊥), хөндлөн тэнхлэг). Бүх үүрлэсэн элементүүд (эхний түвшний) үндсэн тэнхлэгийн дагуу эгнээнд байрладаг. Анхдагч байдлаар, үндсэн тэнхлэг нь хэвтээ бөгөөд зүүнээс баруун тийш (→), хөндлөн тэнхлэг нь босоо, дээрээс доош чиглэсэн байна (↓).
Үндсэн ба хөндлөн тэнхлэгүүдийг сольж болох бөгөөд дараа нь элементүүдийг дээрээс доош (↓) байрлуулж, өндөрт тохирохгүй бол зүүнээс баруун тийш (→) шилжих болно - өөрөөр хэлбэл тэнхлэгүүдийг зүгээр л сольж болно. . Энэ тохиолдолд элементүүдийн зохион байгуулалтын эхлэл ба төгсгөл өөрчлөгдөхгүй - зөвхөн чиглэл (тэнхлэг) өөрчлөгдөнө! Ийм учраас та савны доторх тэнхлэгүүдийг төсөөлөх хэрэгтэй. Гэсэн хэдий ч "бие махбодийн" тэнхлэгүүд байдаг бөгөөд тэдгээр нь ямар нэгэн зүйлд нөлөөлдөг гэж бодож болохгүй. Энд байгаа тэнхлэг нь зөвхөн савны доторх элементүүдийн хөдөлгөөний чиглэл юм. Жишээлбэл, хэрэв бид үндсэн тэнхлэгийн төв рүү элементүүдийн зэрэгцүүлэлтийг зааж өгөөд дараа нь энэ үндсэн тэнхлэгийн чиглэлийг өөрчилсөн бол тэгшитгэл өөрчлөгдөнө: элементүүд нь дунд хэвтээ байрлалтай байсан, харин босоо тэнхлэгийн хувьд дунд нь болсон ... Жишээг харна уу.
Flexbox-ийн өөр нэг чухал шинж чанар бол хөндлөн чиглэлд эгнээ байгаа явдал юм. Бидний юу яриад байгааг ойлгохын тулд үндсэн хэвтээ тэнхлэг байгаа гэж төсөөлөөд үз дээ, олон элемент байдаг бөгөөд тэдгээр нь саванд "тохирохгүй" тул өөр эгнээ рүү шилждэг. Тэдгээр. чингэлэг нь иймэрхүү харагдаж байна: дотор нь хоёр эгнээ бүхий сав, мөр бүр нь хэд хэдэн элемент агуулсан. Танилцуулсан уу? Одоо бид зөвхөн элементүүдийг төдийгүй мөрүүдийг босоо байдлаар тэгшлэх боломжтой гэдгийг санаарай! Энэ нь хэрхэн ажилладаг нь үл хөдлөх хөрөнгийн жишээн дээр тодорхой харагдаж байна. Энэ нь схемийн дагуу иймэрхүү харагдаж байна:
![](https://i0.wp.com/wp-kama.ru/wp-content/uploads/2017/02/ryady-elementy-kontejnera.png)
Байршлын загварт нөлөөлж болох CSS шинж чанарууд: хөвөх, тодорхой, босоо зэрэгцүүлэх, баганууд уян хатан загварт ажиллахгүй. Энд байрлалыг бий болгох өөр загварыг ашигладаг бөгөөд эдгээр CSS шинж чанаруудыг үл тоомсорлодог.
Flexbox CSS шинж чанарууд
Flexbox нь уян хатан дизайныг бүхэлд нь удирдах өөр өөр CSS дүрмийг агуулдаг. Заримыг нь үндсэн саванд, бусад нь энэ савны элементүүдэд хэрэглэх шаардлагатай.
Савны хувьд
дэлгэц:Элементийн уян хатан шинж чанарыг идэвхжүүлнэ. Энэ шинж чанар нь элемент өөрөө болон түүний үүрлэсэн элементүүдийг хамардаг: зөвхөн нэгдүгээр түвшний үр удам нөлөөлнө - тэдгээр нь уян хатан савны элементүүд болно.
- уян хатан- элемент нь бүхэл бүтэн өргөнийг сунгаж, эргэн тойрон дахь блокуудын дунд бүрэн зайтай байна. Мөр тасрах нь блокийн эхэн ба төгсгөлд тохиолддог.
- inline-flex- элементийг бусад элементүүдээр ороосон. Энэ тохиолдолд түүний дотоод хэсгийг блок элемент болгон форматлаж, элемент нь өөрөө доторлогоотой байна.
flex болон inline-flex нь display:block болон display:inline-block-той төстэй эргэн тойрны элементүүдтэй харилцан адилгүй үйлчилдгээрээ ялгаатай.
уян хатан чиглэл:Савны гол тэнхлэгийн чиглэлийг өөрчилдөг. Үүний дагуу хөндлөн тэнхлэг өөрчлөгддөг.
- мөр (өгөгдмөл)- зүүнээс баруун тийш элементүүдийн чиглэл (→)
- багана- элементүүдийн чиглэлийг дээрээс доош (↓)
- эгнээ-урвуу- элементүүдийн баруунаас зүүн тийш чиглэл (←)
- багана-урвуу- элементүүдийн чиглэлийг доороос дээш ()
Саванд тохирохгүй элементүүдийг шилжүүлэхийг хянадаг.
- nowrap (өгөгдмөл)- үүрлэсэн элементүүдийг саванд байрлуулсан эсэхээс үл хамааран нэг мөрөнд (чиглэл=мөртэй) эсвэл нэг баганад (чиглэл= баганатай) байрлуулна.
- боох- саванд багтахгүй бол дараагийн эгнээнд шилжих элементүүдийг багтаана. Энэ нь хөндлөн тэнхлэгийн дагуу элементүүдийн хөдөлгөөнийг идэвхжүүлдэг.
- эргүүлэх- боодолтой адил, зөвхөн шилжүүлэг нь доошоо биш, харин дээшээ (эсрэг чиглэлд).
flex-direction болон flex-wrap шинж чанаруудыг хослуулсан. Тэдгээрийг ихэвчлэн хамтад нь ашигладаг тул бага код бичихийн тулд flex-flow шинж чанарыг бий болгосон.
flex-flow нь хоосон зайгаар тусгаарлагдсан эдгээр хоёр шинж чанарын утгыг хүлээн авдаг. Эсвэл та аливаа үл хөдлөх хөрөнгийн нэг утгыг зааж өгч болно.
/* зөвхөн уян хатан чиглэл */ flex-flow: row; уян хатан урсгал: эгнээ урвуу; уян хатан урсгал: багана; уян хатан урсгал: багана-урвуу; /* зөвхөн flex-wrap */ flex-flow: nowrap; уян хатан урсгал: боох; уян хатан урсгал: боох-урвуу; /* хоёр утгыг нэг дор: flex-direction болон flex-wrap */ flex-flow: row nowrap; уян хатан урсгал: баганын боодол; уян хатан урсгал: багана-урвуу боолт-урвуу; зөвтгөх агуулга:
Үндсэн тэнхлэгийн дагуу элементүүдийг тэгшлэнэ: хэрэв чиглэл=мөр бол хэвтээ, харин чиглэл=баган бол босоо байдлаар.
- уян хатан эхлэл (өгөгдмөл)- элементүүд эхнээсээ явах болно (төгсгөлд нь бага зэрэг зай үлдсэн байж магадгүй).
- уян хатан төгсгөл- элементүүдийг төгсгөлд нь зэрэгцүүлсэн (эхэнд нь зай үлдэх болно)
- төв- төвд (зүүн, баруун талд зай үлдэх болно)
- зай - хооронд- хамгийн гадна талын элементүүд нь ирмэг дээр дарагдсан (элементүүдийн хоорондын зай жигд тархсан)
- орон зай - эргэн тойронд- чөлөөт зай нь элементүүдийн хооронд жигд тархсан (хамгийн гаднах элементүүд нь ирмэг дээр дарагдаагүй). Савны ирмэг ба гаднах элементүүдийн хоорондох зай нь эгнээний дундах элементүүдийн хоорондох зайны хагастай тэнцүү байх болно.
- орон зай - тэгш
Элемент агуулсан мөрүүдийг хөндлөн тэнхлэгийн дагуу зэрэгцүүлнэ. Зөвхөн эсрэг тэнхлэгт тохирох агуулгатай адил.
Тайлбар: Хамгийн багадаа 2 эгнээ байх үед ажиллана, i.e. Зөвхөн 1 эгнээ байвал юу ч болохгүй.
Тэдгээр. хэрэв flex-direction: row бол энэ шинж чанар нь үл үзэгдэх мөрүүдийг босоо байдлаар зэрэгцүүлнэ. Блокны өндрийг хатуу тогтоож, эгнээний өндрөөс их байх ёстой гэдгийг энд анхаарах нь чухал бөгөөд эс тэгвээс эгнээ нь савыг сунгаж, тэдгээрийн хооронд ямар ч зай байхгүй тул тэдгээрийн аль ч шугам нь утгагүй болно. тэдгээрийг... Гэхдээ flex-direction: багана , дараа нь мөрүүд хэвтээ → хөдөлж, савны өргөн нь мөрний өргөнөөс бараг үргэлж их байх ба мөрүүдийг зэрэгцүүлэх нь шууд утга учиртай...
- сунгах (өгөгдмөл)- эгнээ бүрэн дүүргэхийн тулд эгнээ сунгана
- уян хатан эхлэл- мөрүүдийг савны дээд талд бүлэглэсэн (төгсгөлд нь бага зэрэг зай үлдсэн байж магадгүй).
- уян хатан төгсгөл- мөрүүдийг савны ёроолд бүлэглэв (эхэнд зай үлдэх болно)
- төв- мөрүүдийг савны төвд бүлэглэв (ирмэг дээр зай үлдэх болно)
- зай - хооронд- гадна эгнээ ирмэг дээр дарагдсан (мөр хоорондын зай жигд тархсан)
- орон зай - эргэн тойронд- чөлөөт зай нь эгнээний хооронд жигд тархсан (хамгийн гадна талын элементүүд нь ирмэг дээр дарагдаагүй). Савны ирмэг ба гаднах элементүүдийн хоорондох зай нь эгнээний дундах элементүүдийн хоорондох зайны хагастай тэнцүү байх болно.
- орон зай - тэгш- space-around-тай ижил, зөвхөн гадна талын элементүүд болон савны ирмэг хоорондын зай нь элементүүдийн хоорондох зайтай ижил байна.
Нэг эгнээ (үл үзэгдэх эгнээ) доторх хөндлөн тэнхлэгийн дагуу элементүүдийг тэгшлэнэ. Тэдгээр. Мөрүүдийг өөрөө align-content-ээр зэрэгцүүлж, эдгээр мөр (мөр) доторх элементүүдийг align-itements болон хөндлөн тэнхлэгийн дагуу бүхэлд нь зэрэгцүүлнэ. Үндсэн тэнхлэгийн дагуу ийм хуваагдал байхгүй, мөрийн тухай ойлголт байхгүй, элементүүдийг justify-content-ээр зэрэгцүүлдэг.
- сунгах (өгөгдмөл)- шугамыг бүрэн дүүргэхийн тулд элементүүдийг сунгасан
- уян хатан эхлэл- элементүүдийг эгнээний эхэнд дардаг
- уян хатан төгсгөл- элементүүдийг эгнээний төгсгөлд дардаг
- төв- элементүүдийг эгнээний төвд байрлуулна
- суурь- элементүүдийг текстийн үндсэн шугамтай зэрэгцүүлсэн
Савны элементүүдийн хувьд
уян хатан өсөлт:Саванд сул зай байгаа үед элементийн томруулах коэффициентийг тохируулна. Өгөгдмөл flex-grow: 0 i.e. Элементүүдийн аль нь ч ургаж, саванд байгаа хоосон зайг дүүргэх ёсгүй.
Өгөгдмөл flex-grow: 0
- Хэрэв та бүх элементүүдийн хувьд flex-grow:1-ийг зааж өгвөл тэдгээр нь бүгд адилхан сунаж, савны бүх сул зайг дүүргэх болно.
- Хэрэв та аль нэг элемент дээр flex-grow:1-ийг зааж өгвөл энэ нь саванд байгаа бүх сул орон зайг дүүргэх бөгөөд justify-content-ээр дамжуулан тэгшитгэх нь цаашид ажиллахгүй: зэрэгцүүлэх сул зай байхгүй болно...
- Flex-grow-тай:1 . Хэрэв тэдгээрийн аль нэг нь flex-grow:2-тэй бол энэ нь бусад бүхнээс 2 дахин их байх болно
- Хэрэв уян хатан савны доторх бүх уян хайрцаг нь flex-grow:3-тай бол тэдгээр нь ижил хэмжээтэй байх болно.
- Flex-grow-тай:3 . Хэрэв тэдгээрийн аль нэг нь flex-grow:12 байвал бусад бүхнээс 4 дахин том болно
Хэрхэн ажилладаг? Контейнер нь 500px өргөнтэй, тус бүр нь 100px суурь өргөнтэй хоёр элементтэй гэж үзье. Энэ нь саванд 300 үнэгүй пиксел үлдсэн гэсэн үг юм. Одоо бид flex-grow гэж зааж өгвөл:2; , мөн хоёр дахь уян хатан өсөлт: 1; , дараа нь блокууд нь савны өргөнийг бүхэлд нь эзлэх бөгөөд эхний блокийн өргөн нь 300px, хоёр дахь нь 200px байх болно. Энэ нь саванд байгаа 300px чөлөөт зайг элементүүдийн хооронд 2:1 харьцаагаар хуваарилсан, эхнийх нь +200px, хоёр дахь нь +100px байсантай холбон тайлбарлаж байна.
Тайлбар: та утгын бутархай тоог зааж өгч болно, жишээлбэл: 0.5 - flex-grow:0.5
уян хатан агшилт:Элементийн бууралтын коэффициентийг тохируулна. Энэ шинж чанар нь flex-grow-ын эсрэг утгатай бөгөөд хэрэв саванд хоосон зай үлдээгүй бол элемент хэрхэн агшихыг тодорхойлдог. Тэдгээр. Бүх элементийн хэмжээнүүдийн нийлбэр нь савны хэмжээнээс их байвал үл хөдлөх хөрөнгө ажиллаж эхэлнэ.
Өгөгдмөл flex-shrink:1
Контейнер нь 600px өргөнтэй, тус бүр нь 300px өргөнтэй хоёр элемент агуулсан гэж үзье - flex-basis:300px; . Тэдгээр. хоёр элемент нь савыг бүрэн дүүргэдэг. Эхний элементийг flex-shrink өгнө: 2; , хоёр дахь уян хатан агшилт: 1; . Одоо савны өргөнийг 300px-ээр багасгая, өөрөөр хэлбэл. Элементүүд нь саванд багтахын тулд 300 пикселээр багасах ёстой. Тэд 2: 1 харьцаагаар багасах болно, i.e. Эхний блок нь 200px, хоёр дахь нь 100px, шинэ элементийн хэмжээ нь 100px болон 200px-ээр багасах болно.
Тайлбар: та утгын бутархай тоог зааж өгч болно, жишээлбэл: 0.5 - flex-shrink:0.5
уян хатан суурь:Элементийн үндсэн өргөнийг тохируулна - элементийн өргөнд нөлөөлөх бусад нөхцлүүдийг тооцоолохын өмнөх өргөн. Утгыг px, em, rem, %, vw, vh гэх мэтээр зааж өгч болно. Эцсийн өргөн нь суурийн өргөн, уян хатан, уян хатан, агшилтын утга, блок доторх агуулгаас хамаарна. Автоматтай бол элемент нь доторх агуулгатай харьцуулахад үндсэн өргөнийг авдаг.
Өгөгдмөл: автомат
Заримдаа элементийн өргөнийг ердийн width шинж чанараар хатуу тохируулах нь дээр. Жишээлбэл, өргөн: 50%; Энэ нь савны доторх элемент яг 50% байх болно гэсэн үг боловч уян хатан ургах болон уян хатан агшилтын шинж чанарууд ажилласаар байх болно. Энэ нь flex-basis-д зааснаас илүү доторх агуулгаараа элементийг сунгах үед шаардлагатай байж болно. Жишээ.
Хэрэв суналт ба агшилтыг тэг болгож тохируулсан бол уян хатан суурь нь "хатуу" байх болно: flex-basis:200px; уян хатан өсөлт: 0; уян хатан агшилт: 0; . Энэ бүгдийг ингэж бичиж болно: flex:0 0 200px; .
уян хатан: (өсгөх агшилтын үндэс)Гурван шинж чанарын товч тойм: flex-grow flex-shrink flex-basis .
Өгөгдмөл: уян хатан: 0 1 автомат
Гэхдээ та нэг эсвэл хоёр утгыг зааж өгч болно:
Flex: байхгүй; /* 0 0 auto */ /* тоо */ flex: 2; /* flex-grow (flex-basis 0-д очно) */ /* тоо биш */ flex: 10em; /* уян хатан суурь: 10em */ уян хатан: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* уян хатан суурь: агуулга */ уян хатан: 1 30px; /* flex-grow болон flex-basis */ flex: 2 2; /* flex-grow and flex-shrink (flex-basis 0-д очно) */ flex: 2 2 10%; /* flex-grow болон flex-shrink and flex-basis */ align-self:
Зөвхөн нэг элементийн хувьд align-items шинж чанарыг өөрчлөх боломжийг танд олгоно.
Өгөгдмөл: align-items контейнерээс
- сунгах- мөрийг бүрэн дүүргэхийн тулд элементийг сунгасан
- уян хатан эхлэл- элементийг мөрийн эхэнд дарсан
- уян хатан төгсгөл- элементийг мөрийн төгсгөл хүртэл дарна
- төв- элемент нь шугамын төвтэй зэрэгцсэн байна
суурь- элементийг текстийн үндсэн шугамтай зэрэгцүүлсэн байна
Ерөнхий эгнээнд байгаа элементийн дарааллыг (байрлал, байрлал) өөрчлөх боломжийг танд олгоно.
Өгөгдмөл: захиалга: 0
Анхдагч байдлаар, элементүүд нь дараалалтай: 0 бөгөөд HTML кодын харагдах дарааллаар болон мөрийн чиглэлд байрлана. Гэхдээ хэрэв та захиалгын шинж чанарын утгыг өөрчлөх юм бол элементүүдийг утгын дарааллаар байрлуулна: -1 0 1 2 3 ... . Жишээлбэл, хэрэв та дарааллыг зааж өгвөл: 1 элементийн хувьд эхлээд бүх тэг, дараа нь 1-тэй элемент орно.
Жишээлбэл, та үлдсэн элементүүдийн хөдөлгөөний чиглэл эсвэл HTML кодыг өөрчлөхгүйгээр эхний элементийг эцэс хүртэл зөөж болно.
Тэмдэглэл
Уян суурь ба өргөн хоёрын ялгаа юу вэ?
Уян суурь ба өргөн/өндрийн хоорондох чухал ялгааг доор харуулав.
- flex шинж чанарыг ашиглахдаа 3 утгыг (flex-grow/flex-shrink/flex-basis) нэгтгэж, товч бичиж болох боловч өргөнийг нэмэгдүүлэх эсвэл багасгахын тулд та тусад нь бичих хэрэгтэй. Жишээ нь: flex:0 0 50% == width:50%; уян хатан агшилт: 0; . Заримдаа энэ нь зүгээр л эвгүй байдаг.
flex-basis нь зөвхөн үндсэн тэнхлэгт ажилладаг. Энэ нь flex-direction:row-тай flex-basis нь өргөнийг, харин flex-direction:column-ийн тусламжтайгаар өндрийг хянадаг гэсэн үг юм. .
flex-basis нь зөвхөн уян хатан элементүүдэд хамаарна. Энэ нь хэрэв та саванд зориулсан flex-ийг идэвхгүй болговол энэ өмч ямар ч нөлөө үзүүлэхгүй гэсэн үг юм.
Үнэмлэхүй савны элементүүд уян хатан барилгад оролцдоггүй ... Энэ нь туйлын байрлалтай бол уян хатан суурь нь савны уян хатан элементүүдэд нөлөөлөхгүй гэсэн үг юм: absolute . Тэд өргөн/өндөрийг зааж өгөх шаардлагатай.
Боломжтой бол уян хатан суурьтай хэвээр байгаарай. Зөвхөн уян хатан суурь нь тохиромжгүй үед өргөнийг ашиглана.
Флекс суурь ба өргөн хоорондын ялгаа - алдаа эсвэл онцлог уу?
Уян элементийн доторх агуулга нь түүнийг түлхэж, үүнээс цааш гарах боломжгүй. Гэсэн хэдий ч, хэрэв та өргөнийг flex-basis биш харин width эсвэл max-width ашиглан тохируулбал уян хатан савны доторх элемент нь тухайн контейнерийн хязгаараас хэтрэх боломжтой болно (заримдаа энэ нь таны хүссэн үйлдэл юм). Жишээ:
Flex байршлын жишээ
Хөтөч хоорондын нийцтэй байдлыг хангахын тулд угтварыг жишээнүүдийн хаана ч ашигладаггүй. Би үүнийг css уншихад хялбар болгох үүднээс хийсэн. Тиймээс Chrome эсвэл Firefox-ын хамгийн сүүлийн хувилбаруудын жишээг харна уу.
#1 Босоо болон хэвтээ зэрэгцүүлсэн энгийн жишээ
Хамгийн энгийн жишээнээс эхэлье - босоо болон хэвтээ байрлалыг нэгэн зэрэг, ямар ч блокийн өндөрт, тэр ч байтугай резин.
Эсвэл үүнтэй адил, дотор нь блокгүй:
#1.2 Уян блокийн элементүүдийн хоорондох тусгаарлалт (завсарлага).
Контейнерийн элементүүдийг ирмэгийн дагуу байрлуулж, дараа нь завсарлага гарах элементийг санамсаргүйгээр сонгохын тулд та margin-left:auto эсвэл margin-right:auto шинж чанарыг ашиглах хэрэгтэй.
№2 flex дээр дасан зохицох цэс
Хуудасны хамгийн дээд хэсэгт цэс үүсгэцгээе. Өргөн дэлгэц дээр баруун талд байх ёстой. Дунджаар дундуур нь зэрэгцүүлнэ. Мөн жижиг дээр элемент бүр шинэ мөрөнд байх ёстой.
#3 Дасан зохицох 3 багана
Энэ жишээ нь 3 баганыг хэрхэн хурдан бөгөөд хялбар болгохыг харуулж байгаа бөгөөд нарийссан үед 2, дараа нь 1 болж хувирдаг.
Үүнийг хэвлэл мэдээллийн дүрмийг ашиглахгүйгээр хийж болно, бүх зүйл уян хатан байдаг гэдгийг анхаарна уу.
jsfiddle.net руу очоод "үр дүн" хэсгийн өргөнийг өөрчил
#4 Флекс дээр дасан зохицох блокууд
Нэг том, хоёр жижиг 3 блок гаргах хэрэгтэй гэж бодъё. Үүний зэрэгцээ блокууд нь жижиг дэлгэцэнд дасан зохицох шаардлагатай. Бид хийдэг:
jsfiddle.net руу очоод "үр дүн" хэсгийн өргөнийг өөрчил
#5 уян хатан, шилжилттэй галерей
Энэ жишээ нь flex ашиглан зурагтай хөөрхөн баян хуур хэрхэн хурдан хийж болохыг харуулж байна. Флексийн шилжилтийн шинж чанарт анхаарлаа хандуулаарай.
№6 Flex to Flex (зүгээр л жишээ)
Даалгавар бол уян хатан блок хийх явдал юм. Ингэснээр блок бүрийн текстийн эхлэл хэвтээ байдлаар нэг мөрөнд байна. Тэдгээр. Өргөн нь нарийсч, блокууд нь өндөрт ургадаг. Зураг нь дээд талд, товчлуур нь үргэлж доод талд байх ёстой бөгөөд голд байгаа текст нь нэг хэвтээ шугамын дагуу эхэлдэг ...
Энэ асуудлыг шийдэхийн тулд блокуудыг өөрөө уян хатан байдлаар сунгаж, хамгийн их өргөнийг тохируулна. Дотоод блок бүр нь мөн уян хатан бүтэцтэй, эргэдэг тэнхлэгийн уян хатан чиглэлтэй: багана; мөн голд байгаа элемент (текст байгаа газар) сунгасан байна flex-grow:1; бүх чөлөөт орон зайг дүүргэхийн тулд ийм үр дүнд хүрдэг - текст нэг мөрөөр эхэлсэн ...
Илүү олон жишээ
Хөтөчийн дэмжлэг - 98.3%
Мэдээжийн хэрэг, бүрэн дэмжлэг байхгүй, гэхдээ орчин үеийн бүх хөтчүүд flexbox дизайныг дэмждэг. Зарим нь угтварыг шаарддаг хэвээр байна. Бодит дүр зургийг caniuse.com сайтаас харцгаая, өнөөдөр ашиглагдаж байгаа хөтчүүдийн 96.3% нь угтваргүй, 98.3% нь угтвар ашиглаж байгааг харцгаая. Энэ бол flexbox-ийг найдвартай ашиглах гайхалтай үзүүлэлт юм.
Өнөөдөр (2019 оны 6-р сар) ямар угтварууд хамааралтай болохыг мэдэхийн тулд би бүх уян хатан дүрмийн жишээг өгөх болно. шаардлагатай угтвартай:
/* Контейнер */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient: босоо; -webkit-box-chirection:normal; -ms-flex-chiraction:column; flex-direction:багана; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow: багана боох; flex-flow: багана боох; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-been; -ms-flex-line-pack: түгээх; align-content:space-around; ) /* Элементүүд */ .flex-item ( -webkit-box-flex:1; -ms-flex-pozitif:1; flex-grow:1; -ms-flex- сөрөг:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :төв; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; захиалга:2; )
Угтвартай шинж чанарууд нь анхны өмчийн өмнө очвол илүү дээр юм.
Энэ жагсаалтад өнөөдөр шаардлагагүй угтварууд байхгүй (caniuse-ийн дагуу), гэхдээ ерөнхийдөө илүү олон угтварууд байдаг.
Chrome | Сафари | Firefox | Дуурь | I.E. | Android | iOS |
---|---|---|---|---|---|---|
20- (хуучин) | 3.1+ (хуучин) | 2-21 (хуучин) | 10 (холбогч) | 2.1+ (хуучин) | 3.2+ (хуучин) | |
21+ (шинэ) | 6.1+ (шинэ) | 22+ (шинэ) | 12.1+ (шинэ) | 11+ (шинэ) | 4.4+ (шинэ) | 7.1+ (шинэ) |
- (шинэ) - шинэ синтакс: дэлгэц: уян хатан; .
- (tweener) - 2011 оны хуучин албан бус синтакс: дэлгэц: flexbox; .
- (хуучин) - 2009 оны хуучин синтакс: дэлгэц: хайрцаг;
Видео
За, видеоны талаар бүү мартаарай, заримдаа энэ нь сонирхолтой бөгөөд ойлгомжтой байдаг. Энд хэд хэдэн алдартай нь байна:
Flex дээрх ашигтай холбоосууд
flexboxfroggy.com - flexbox боловсролын тоглоом.
Flexplorer бол харааны уян хатан код бүтээгч юм.
Энэ нийтлэлд би Flexbox ашиглан хариу үйлдэл үзүүлэх хэвтээ цэсийг хэрэгжүүлэх нэг аргыг харуулахыг хүсч байна. Цэсийг хэрэгжүүлэх энэ аргыг Warface Hub вэбсайтад ашигладаг боловч арай өөр бүтэцтэй ба Оилүү шүгэл.
Жил орчмын өмнө би нэгэн компанид ажиллаж байхдаа "Эхлээд бид бүх зүйлийг CSS ашиглан хийдэг, дараа нь зөвхөн JavaScript-г нэмдэг" гэсэн гайхалтай хэллэгийг хэлж байсан. Зөвлөгөө нь сайн юм шиг санагдаад би түүнийг дагасан. Гэвч ийм зүйл тохиолдоход би сэтгэлээр унасан. Одоо бүх зүйлийг ийм аргаар хийх шаардлагагүй гэдэг нь надад эргэж ирэв.
Тиймээс, зорилгодоо ойртож байна. Би судалж, хэрэгжүүлж эхэлсэн.
Зорилго
- Flexbox шинж чанаруудтай ажиллах үндсэн ур чадвар эзэмших;
- хэвтээ дасан зохицох цэсийг боловсруулах;
- Үүссэн шийдлийг төсөлд хэрэглээрэй.
Хэрэгсэл ба баримт бичиг
- NPM - багц менежерийн хувьд (бид одоо Yarn руу идэвхтэй шилжиж байна)
- Grunt бол таны төслийг бүтээхэд туслах хэрэгсэл юм
- Flexbox баримт бичиг (харна уу хэрэгтэй холбоосууд);
Бүтэц
![](https://i2.wp.com/habrastorage.org/files/84c/41a/2db/84c41a2db4fe4e44a64b374a04d5cadb.png)
Цэсний хэв маягийн бүтцийг зохион байгуулахын тулд би тайлбарласан ойлголтыг ашигласан. Энэхүү үзэл баримтлалын зохиогч бүх хэв маягийн тайлбарыг хэд хэдэн хэсэгт хуваахыг санал болгож байна.
- зохион байгуулалт– хуудас дээрх бүрэлдэхүүн хэсгүүдийн байрлалыг дүрсэлсэн;
- бүрэлдэхүүн хэсэг- бүрэлдэхүүн хэсэгт орсон элементүүдийн харагдах байдал, зан төлөвийг тодорхойлдог;
- бүрэлдэхүүн– нэг элементийн харагдах байдал, зан төлөвийг дүрсэлсэн;
- Суурь- тогтмол тоонуудын тодорхойлолт, үндсэн хэв маяг (normalize.css дээрх шиг)
- Бүрэлдэхүүн хэсэг- хэрэглээний бүрэлдэхүүн хэсгүүдийн тодорхойлолт. Манай тохиолдолд "Цэс" бүрэлдэхүүн хэсэг
- Бүрэлдэхүүн- товчлуур, холбоос гэх мэт элементүүдийн хэв маягийн тодорхойлолт.
- Зохион байгуулалт- хуудас дээрх блокуудын байршлын тодорхойлолт
- style.scss- энэ файлд бид бүгдийг нэгтгэх болно
CSS болон HTML оролт, шошго шошгууд
HTML тэмдэглэгээг зурж эхлэхээсээ өмнө CSS сонгогчдод хэрэгтэй сонирхолтой зан үйлийг сануулах/үзүүлэхийг хүсч байна.
Энэ жишээн дээр та шошгон дээр дарахад сонгосон оролтыг авах болно гэдгийг анзаарч магадгүй юм. Энэ талаар онцгой зүйл байхгүй (харна уу), гэхдээ хамгийн сонирхолтой зүйл нь CSS сонгогч тал дээр тохиолддог.
Оруулах:шалгасан (хүрээний өнгө: улаан; )
Энэ CSS сонгогчийг зөвхөн оролт сонгогдсон үед л боловсруулна (:checked-г үзнэ үү)
CSS сонгогчдод анхаарах ёстой хоёр дахь зүйл бол дараагийн элементийг сонгох явдал юм (Зэргэлдээ ах дүү сонгогчид ба Ерөнхий ах дүү сонгогчийг үзнэ үү). Өөрөөр хэлбэл, бид одоогийн элементийн дараа дараагийн элементийг сонгож болно.
Оруулга:шалгасан + .шошго (өнгө: улаан; )
Энэ жишээнд бид дараах зан үйлийг олж авна: оролтын ангитай элемент сонгогдох үед шошгоны ангитай дараагийн элемент нь тайлбарласан хэв маягийн дагуу өөрчлөгдөнө.
Одоо энэ бүгдийг нэгтгэж болно.
Нэг элемент бүхий цэсийн бүтэц
Энэ жишээнд би дараах зан үйлийг бий болгохын тулд зарим оролт болон шошгоны элементүүдийг нэмсэн:
- :checked төлөвт байгаа эхнийхээс бусад name=menu-item-trigger элемент бүр нь дараагийн label.menu-item-close болон div.menu-sub элементүүдийн харагдах байдал болон байрлалыг өөрчлөх бөгөөд ингэснээр label.menu-item-close нь хаагдах болно. элемент нь label.menu-item-label элементтэй бүрэн давхцаж байгаа бөгөөд label.menu-item-label элементийн доор div.menu-sub гарч ирнэ. Өөрөөр хэлбэл, бид дэд цэсийг нээж, үндсэн цэс дээр дарахад зан төлөвийг өөрчилдөг;
- Эхний элементийн нэр=цэсийн зүйл-триггер нь зөвхөн өмнөх догол мөрөнд оруулсан бүх өөрчлөлтийг буцаахад ашиглагдана, өөрөөр хэлбэл дэд цэсийг хаах;
Сонгосон цэсийн нэг зүйл:
Ийм заль мэхийн дараа оролтын элементүүдийг нуух л үлддэг.
Flexbox
Одоо бид энэ цэсийг өөр өөр нягтрал, өөр өөр хөтөч дээр сайн харуулахын тулд загвар нэмэх хэрэгтэй. Одоогоор бид манай нөөцөд зочилсон хүмүүсийн хамгийн их ашигладаг хөтчүүдийг дэмжихэд чиглэгдэж байна. Үр дүн нь жижиг жагсаалт юм: Chrome, Firefox, IE Edge, IE 11 болон тэдгээрийн хамгийн сүүлийн үеийн гар утасны хувилбарууд.Тусгай хөтөч дээр угтвар (postcss) болон тусад нь бичих хэв маягийг нэмэх замаар дэмжлэг үзүүлдэг.
Flexbox нь хариу үйлдэл хийхэд хялбар болгодог. Савыг тайлбарлахад хангалттай, гэхдээ заримдаа доторх агуулгатай холбоотой асуудлыг шийдэх шаардлагатай болно. Жишээлбэл:
- "мэдлэгийн бааз" гэх мэт урт үгстэй цэсийн зүйлс ба түүний Герман орчуулга "Wissensdatenbank". Энэ тохиолдолд текстэнд боох элемент нэмж, дараах хэв маягийг хэрэглэнэ.
Шошго-текст ( // @ холбоос: http://htmlbook.ru/css/text-overflow халих: далд; текст халих: эллипс; өргөн: 100%; дэлгэц: шугаман блок; )
- Өргөнөөр сунгах шаардлагатай зургууд, гэхдээ өргөнийг тохируулах үед: 100%; тэдгээр нь эх блокоос давж гардаг. Хайрцагны хэмжээ нь энд туслах болно: хилийн хайрцаг; энэ элементийн хувьд;
- Хүүхдийн элементүүдийг бүрэн хэмжээгээр авахгүй эсвэл жигд хуваарилагдахгүй байх зэрэг асуудал гарч болзошгүй. flex: 1 1 auto энд тусалж магадгүй.
Цэс (дэлгэц: flex; align-itements: төвд; flex-wrap: боох; )
Савны элемент бүр нь бүх боломжит орон зайг дүүргэж, доторх агуулгыг голд нь босоо байдлаар байрлуулахаар загварчлагдсан байх ёстой.
Цэсийн зүйл ( уян: 1 1 автомат; дэлгэц: уян хатан; уян хатан чиглэл: багана; зэрэгцүүлэх зүйл: сунгах; )
Илүү үзэсгэлэнтэй цэсийн дэлгэцийг ашиглан хийж болно
Хөвөгч элементүүд дээр суурилсан хуудасны зохион байгуулалт, захын зайг өөрчлөх үе бараг өнгөрсөн үе юм. CSS нь зохион бүтээгчдэд шинэ, сайжруулсан шинж чанарыг өгдөг. Босоо байрлал, элементүүдийн хоорондох жигд зай, элементүүдийн дарааллыг өөрчлөхгүйгээр зохион байгуулалтыг өөрчлөх, "наасан хөл" гэх мэт бусад хэв маягийг Flexbox ашиглан хялбархан хэрэгжүүлдэг.
Энэ нийтлэлд бид Flexbox дээр хэрэгжүүлэхэд тохиромжтой байршлын хэв маягийг авч үзэх болно. Жишээлбэл, бид атомын дизайны зарчмуудыг хэрэгжүүлдэг Tracks програмын интерфейсийг ашиглах болно. Би Flexbox хэрэг болох нөхцөл байдлын талаар ярилцаж, үүнийг байршлын тодорхой загвартай хослуулах алдаануудыг дурдах болно. Бид танд асуудал үүсгэж буй хэв маягийг судалж, асуудлыг шийдвэрлэхэд туслах аргуудыг санал болгож, энэ өмчийг одоо ашиглаж эхлэх нэмэлт тактикуудыг санал болгоно.
Уян хатан атомын бүрэлдэхүүн хэсгүүд
Tracks интерфэйс нь Брэд Фростийн зарчимд тулгуурлан хэсэг бүрийг тусад нь авч үздэг.
Атомын дизайны философийг вэб дизайны LEGO блокуудтай дүйцэхүйц гэж үзэж болно. Организм, молекул, атом гэх мэт шинжлэх ухааны нэр томьёо нь хөгжүүлэгчдэд интерфейсийн элементүүдийн ангилал, үүний дагуу фрагмент бүрийг бүхэлд нь нэг хэсэг гэж илүү гүнзгий ойлгоход ашигладаг. Ангилах энэ арга нь эдгээр хэв маягийг тодорхойлох боломжтой болгож, тор, өнгө, зай зэрэг гадны хүчин зүйлс энэ үйл явцад нөлөөлөхөөс сэргийлдэг. Микро түвшингээс интерфэйсийг бий болгох нь түүний үндсэн микро элементүүдийг дахин ашиглах боломжийг олгодог.
Зураг 1: Эдгээр хэрэглээний элементүүд нь атомын дизайны зарчимд суурилсан өгөгдлийг харуулахад ашиглагддаг. Та аль нь Flexbox ашигладаг болохыг тааж чадах уу? (том хувилбар)
Зураг 2. Flexbox болон атомын дизайны давуу талыг ашиглан Tracks програмын үндсэн интерфейс. (том хувилбар)
Интерфейсийн дизайныг урсгал болон хэрэглэгчийн интерфэйсийн баримт бичгийн хамт InVision-д анхан шатны загвар болгон илгээсэн. Анхны UI аудитын үеэр би Flexbox-ийг хэрэгжүүлэх нь утга учиртай газруудыг тодорхойлж эхэлсэн. Би мөн Flexbox-ийг ихэвчлэн хөвөгч хайрцгаар хэрэгжүүлдэг уламжлалт "зүүн талд байгаа хажуугийн самбар, баруун талд байгаа үндсэн контент" загварыг ашиглан хуудасны зохион байгуулалтанд ашиглахаар шийдсэн.
Html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target ( дэлгэц: flex; flex-direction: эгнээ; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li (дэлгэц: inline-block; /* Оронд нь хөвөгч байрлалтай байршлын системийг ашиглаж болно */ )
Flexbox-ийн дэмжлэг байхгүй тохиолдолд бид display: inline-block ашиглах болно. Хөтөч дээр JavaScript идэвхгүй болсон тохиолдолд бид ижил мэдэгдэлд no-js анги нэмэх болно. CSS каскад нь Flexbox эсвэл JavaScript байхгүй, ачаалахад асуудал гарсан ч ажиллах болно. Flexbox нь хөвөгч, дэлгэцтэй зэрэгцэн орших боломжтой: хүснэгт ба байрлал: харьцангуй; Flexbox-ийг дэмждэг хөтчүүд үүнийг нэн тэргүүнд ашигладаг бол дэмждэггүй хөтчүүд нь уламжлалт CSS зохион байгуулалтын механизмаар хязгаарлагдах болно.
Ердийн адил технологийн эцсийн сонголт нь төслийн зорилго, төсөв, аналитик мэдээллээс хамаарна. Миний алтан дүрэм бол төслийн хамгийн ухаалаг хувилбарыг сонгох явдал юм.
Шугамын хэв маяг
Навигацийн бүрэлдэхүүн хэсгүүд нь зөвхөн хэрэгжүүлэхэд хялбар төдийгүй зарцуулсан цаг хугацаа багассан тул Flexbox-т маш тохиромжтой болсон. Inline загварууд нь хөгжүүлэгчдийн цагийг үрдэгээрээ алдартай боловч Flexbox-ийн тусламжтайгаар бид хэдэн минут ярьж байна. Хэрэв та IE9-ээс өмнөх үед ийм зүйлийг хэрэгжүүлсэн бол энэ нь ямар чухал болохыг ойлгох болно.
Зураг 3: Энэхүү админ самбарын навигац нь босоо байрлалтай навигацийн элементүүдтэй шугамын загварыг ашигладаг. (том хувилбар)
Админ самбарын навигацийн хэв маягийн тэмдэглэгээ нь холбоосыг ороосон навигацийн шошгооос бүрдэнэ. Энэ загварын HTML энд байна:
Мөн холбогдох хэв маяг:
Nav (дэлгэц: flex; align-items: center; /* навигацийн зүйлсийг босоогоор нь төвлөөрэй */ ) nav a (дэлгэц: inline-block; /* IE 10 дахь захиалгат шинж чанартай шугаман элементүүдийн байршлын асуудлаас зайлсхийхийн тулд */) nav a (уян: 1; )
CSS нь тэмдэглэгээ шиг минималист болсон. Навигацийн холбоосуудад заасан шугаман блокийг анхаарна уу. Хэрэв та захиалгат шинж чанартай элементүүдийн дарааллыг өөрчлөхөөр шийдсэн бол энэ мэдэгдэл нь IE10-д ирээдүйд гарч болзошгүй асуудлуудыг шийддэг. Флекс контейнерийн шууд удамд өгөгдсөн бүх захын зай, захын зай нь IE10-д байршлын асуудал үүсгэдэг гэдгийг бид мэднэ; ийм зүйлээс зайлсхийхийн тулд хөтчөөс зохион байгуулалтыг байнга шалгаж байх нь зүйтэй юм.
Зураг 4. Төвлөрсөн лого бүхий толгойн навигацийн загвар нь ихэвчлэн вэбээс олддог бөгөөд Flexbox-д амархан дасан зохицдог. (том хувилбар)
Уламжлал ёсоор, доторлогооны загварыг ихэвчлэн утгын бус тэмдэглэгээг ашиглан хэрэгжүүлдэг бөгөөд Flexbox-ийн тусламжтайгаар бид ийм заль мэхгүйгээр хийж чадна.
Зохион байгуулалт нь логоны баруун ба зүүн талд төв хэсэгт байрлуулсан цэсийн цуглуулгаас бүрдэнэ. Энэ загварын тэмдэглэгээ нь дараах байдалтай байна.
Flexbox нь HTML хакердах хэрэгцээг багасгаж, тэмдэглэгээнд харуулсанчлан семантикийг хадгалах боломжийг олгодог. Энэ HTML нь ирээдүйд ашиглагдах магадлал өндөр тул семантик дэмжлэг чухал; Энэ хэлэлцүүлгийн хүрээнээс хэтэрсэн өөр олон шалтгаан бий.
Flexbox-оос өмнө хөгжүүлэгчид шугаман зохион байгуулалтыг зохион байгуулахын тулд дэлгэц: inline-block, тэр ч байтугай float: left аргыг ашигладаг байсан. Flexbox нь одоо боломжийн сонголт болсон бөгөөд хөгжүүлэгчид үзэсгэлэнтэй дизайн хийхийн тулд муу туршлагыг ашиглах шаардлагагүй болсон. Шаардлагатай CSS нь Зураг 3-т үзүүлсэн өмнөх загварын жишээ шиг товч биш боловч хуучин аргуудыг бодвол хэрэгжүүлэхэд хялбар юм.
Дамжуулах шугамын толгой (дэлгэц: flex; align-items: center; justify-content: space-been; ) .pipeline-header > a (дэлгэц: inline-block; /* IE 10 дарааллыг таньдаггүй тул бид үүнийг хийдэг. тэнд сондгой бүдүүвч үүсгэхгүйн тулд. */ ) .pipeline-logo ( flex: 1; захиалга: 2; текстийг зэрэгцүүлэх: төв; ) .pipeline-nav ( flex: 1.25; захиалга: 1; ) .pipeline-search ( flex: 1; дараалал: 3; ) a ( дараалал: 4; )
3-р зураг дээрх загварт flexbox ашиглахдаа тэмдэглэгээний дарааллыг өөрчлөх боломжтой гэдгийг санаарай. Хэрэв логог зөөх шаардлагатай бол захиалгын шинж чанарыг ашиглан үүнийг хялбархан хийж болно. Тэмдэглэгээний дараалал нь хүртээмжтэй байх нь чухал бөгөөд Flexbox-ын тухайд, ялангуяа хөтчүүдийн хүртээмжийг янз бүрээр хэрэгжүүлдэг тул энэ нь маргаантай байдаг гэдгийг санаарай. Хөтөчүүд (Firefox-аас бусад) болон дэлгэц уншигчид нь CSS-ээр үүсгэсэн визуал дарааллаас илүү гарны навигацийн байршлын дарааллыг ашигладаг.
Зураг 5: Тэмдэглэгээг өөрчлөхгүйгээр flexbox ашиглан дахин дараалуулж, хөтчөөр дүрсэлсэн урсгалыг тэмдэглэгээнд харуулсан. (том хувилбар)
Ийм зохион байгуулалтын кодыг доор харуулав. Элементүүдийн дарааллыг өөрчлөхөд тэмдэглэгээг ашигладаггүй.
Энд CSS-ийг Зураг 5-ын баруун талд байгаа диаграмын элементүүдийн дарааллыг өөрчлөхөд ашигладаг.
Контейнер (дэлгэц: уян хатан; flex-direction: багана; /* мөр нь анхдагч утга */ ) толгой ( дараалал: 2; ) үндсэн ( дараалал: 3; ) хөл ( дараалал: 1; )
Энэ төрлийн байршлыг зөвхөн навигаци хийхээс илүүтэйгээр ашигладаг. Та үүнийг хөл хэсэгт харсан байх.
Зураг 6: Хөл хэсэгт бидний навигацид ашигласан ижил загварыг ашигласан болно. (том хувилбар)
Энэ хэв маягийг ашиглахдаа контент нь саванд хангалттай зай байхгүй байж магадгүй гэдгийг анхаарах хэрэгтэй. Контент нь төвөөс ирмэг хүртэл тархах ёстой юу? Энэ нь бусад зохион байгуулалтад хэрхэн нөлөөлөх вэ? Төслийг эхлүүлэхээсээ өмнө эдгээр асуултын талаар бодож үзээрэй. Хэрэглэгчдэд гарын навигаци чухал гэдгийг санаарай.
Шугамын оролтын талбарууд
Дүрсүүд нь ялангуяа Photoshop дээр хийсэн нарийн тор бүтэцтэй нягт уялдаатай байвал дизайны хар дарсан зүүд байж болно. Миний нэрлэж заншсанаар "inline label" загвар нь Fender Stratocaster нь рок хөгжимд чухал ач холбогдолтой юм.
Зураг 7: Inline хаягууд болон оролтын талбарууд нь Flexbox-г ашиглаж болох өөр нэг хэсэг юм. Гэхдээ шошгоны текст нь текстийн хэмжээнээс хамаарч оролтын талбарт хэрхэн буцаж ирэхээс болгоомжил. (том хувилбар)
Өмнөх хэсэгт дурьдсанчлан, хөтчийн хэмжээ өөрчлөгдөх эсвэл динамик контент байгаа үед агуулгыг контейнер дотор хэрхэн хуваарилахаа шийдэх хэрэгтэй.
Зураг 8: Таны агуулгыг хэрхэн өргөжүүлэхээ шийдээрэй. Зүүн талд дэлгэц: дунд хэсэгт босоо байрлалтай ширээ, баруун талд төв рүү чиглүүлэх флексбокс байна. (том хувилбар)
Эдгээр дэлгэцийн агшин нь динамик эсвэл том контент бүхий Flexbox алдааг тодорхой харуулж байна. Зөв зураг дээрх эффект нь миний "төвийг түлхэх" гэж нэрлэдэг зүйл бөгөөд энэ нь шинэ контент төвөөс гадагш түлхэгдэнэ гэсэн үг юм.
Зураг 8 дээрх шугамын шошгоны хэв маягийн тэмдэглэгээг энд үзүүлэв.
Асуудлын шийдэл нь дэлгэцийг ашиглах явдал юм: хүснэгт; урт текстийн хувьд. Энэ нь контентыг төвөөс ирмэг рүү биш дээрээс доош урсгах боломжийг олгодог.
Form-group ( дэлгэц: flex; ) .form-group шошго ( дэлгэц: хүснэгт; босоо зэрэгцүүлэх: дунд; ) .form-group оролт ( flex: 1; )
Флексбокс болон дэлгэцийн хослол: хүснэгт нь цаашид судлах нь зүйтэй гайхалтай техник юм. Гэхдээ үүнийг ашиглахдаа алдааг цаг тухайд нь илрүүлэхийн тулд туршилтын орчинд байршлыг байнга шалгаж байх нь чухал юм.
Зураг 9: Оролтын талбарууд болон товчлууруудыг нэг мөрөнд ашигласнаар тэдгээрийн өндрийг тэнцүү байлгах замаар дизайн дахь тэнцвэрийг бий болгоно. (том хувилбар)
Би энэ загварыг ашиглан хэрэгжүүлсэн олон хайлтын талбаруудыг харсан. Энэ бол маш уян хатан загвар бөгөөд олон төрлийн загварт дахин ашиглах боломжтой. Мэдээжийн хэрэг, CSS нь контекст-тусгай шинж чанаруудыг ашиглан хэв маягийн олон талт байдлыг нэвтрүүлж чадна; үүнээс зайлсхийх хэрэгтэй.
Шаардлагатай HTML нь ердийн бөгөөд flexbox бүтцэд зориулсан div боодолтой.
Мөн энд загварууд байна:
Form-group ( дэлгэц: flex; ) .form-group оролт ( flex: 1; )
Доош урсдаг цэс
Зураг 10. Унадаг цэстэй хуудасны хэсгийг хурдан байршуулах зорилгоор Flexbox-ын боломжуудыг ашиглан тодруулсан. (том хувилбар)
Унждаг цэс нь зүүн талд босоо төвлөрсөн шугамын элементүүдийг агуулсан багана, баруун талд байгаа зүйлсийн жагсаалтаас тус бүр өөрийн мөрөнд байрладаг.
Зураг 11. Үндсэн интерфэйсийн цэсийг Flexbox программыг ашиглан бүтээв. (том хувилбар)
Энэхүү навигацийн цэсийн тэмдэглэгээ нь дараах HTML-г үндсэн болгон ашигладаг.
Харгалзах CSS нь хөгжүүлэгчдэд таалагддаг шиг энгийн бөгөөд ойлгомжтой.
Цэс (дэлгэц: flex; ) .menu__options (дэлгэц: flex; align-items: center; ) .menu__items (дэлгэц: flex; flex-direction: багана; )
Шаардлагатай байрлалыг хэд хэдэн мөр кодоор хийдэг. Нэмж дурдахад энэ код нь сүлжээний бүтцээс тусгаарлагдсан бөгөөд тэмдэглэгээ нь семантик утгыг хадгалдаг. Энэ бол Flexbox-ийн нарийн төвөгтэй байрлал, эмх замбараагүй байрлалаас зайлсхийх чадварын өөр нэг жишээ юм.
Хэвлэл мэдээллийн объектууд
Зураг 12: Медиа объектын загвар нь flexbox-г ашигладаг бөгөөд тогтмол өргөнтэй SVG-г зүүн талд байрлуулж, флексбоксийн бусад контентыг хажууд нь байрлуулна. (том хувилбар)
"Хэвлэл мэдээллийн объект" гэж нэрлэгддэг энэхүү бүх нийтийн хэв маяг нь зураг эсвэл видеог нэг талдаа бусад контентын хажууд байрлуулдаг.
Medi-obj (дэлгэц: flex; align-items: flex-start; ) .media-obj__body ( flex: 1; )
Зураг 13. Энэ бол хөтчийн цонхны хэмжээг өөрчлөх туйлын тохиолдол бөгөөд зураг нь хамгийн их өргөн, баруун тал нь уян хатан байхаар тохируулагдсан 1. Тогтмол өргөнтэй элементүүд болон уян хатан элементүүдийг холихдоо болгоомжтой байгаарай.
Flexbox нь энэ загварт маш сайн ажилладаг боловч медиа контент нь дээр үзүүлсэнтэй ижил аргаар бусад контенттой харьцах боломжтой тул болгоомжтой байгаарай. Жишээн дээр та график орон зай хэрхэн нурж, текстийг дээрээс нь түлхэж байгааг харж болно. Энэ нь тэнэг жишээ мэт санагдаж магадгүй, учир нь хэн хөтөчөө ийм нарийсгах вэ? Гэхдээ энэ нь чухал биш - бид Flexbox-ийг ашиглахаасаа өмнө контент нь түүний орчинтой хэрхэн холбогдож байгааг ойлгох хэрэгтэй.
Энэ хэв маягийн шийдэл нь flexbox доторх зөөвөрлөгчийн хувьд зургийг хамгийн их өргөн: 100% болгож тохируулах эсвэл шаардлагатай бол тэдгээрийг тохируулахын тулд тогтмол зургийн өргөн болон медиа асуулга ашиглах явдал юм.
Flexbox хуанли
Хуанли бол хамгийн түгээмэл виджетүүдийн нэг юм. Та яагаад ширээ ашиглаж болохгүй гэж асууж магадгүй юм. Манай тохиолдолд хуанли нь огноог зүгээр л сонгоход ашиглагддаг тул би товчлууруудыг өдөр, сар, жилээр ашиглахаар шийдсэн бөгөөд эдгээр товчлууруудыг эгнээний хүрээгээр хязгаарлахаар шийдсэн (долоо хоног бүрийн хуанлийн мөрийг тусдаа div-д ороосон). Энэ аргыг ашиглах нь тэмдэглэгээний хэмжээг багасгаж, зураглал үүсгэхэд хялбар болгох боломжийг олгоно (маш их баярлалаа.