Бүх flexbox шинж чанарууд. Flexbox: CSS зохион байгуулалтын шинэ зарчим. Дасан зохицох зураглал хийх

Товчхондоо, Flexbox-ийн зохион байгуулалт нь бидэнд нэг удаа хэцүү асуудлуудын энгийн шийдлүүдийг өгдөг. Жишээлбэл, та элементийг босоо байдлаар зэрэгцүүлэх, эсвэл дэлгэцийн доод хэсэгт хөлийг дарах, эсвэл зүгээр л нэг мөрөнд хэд хэдэн блок оруулах шаардлагатай бол тэдгээр нь бүх хоосон зайг эзлэх болно. Үүнтэй төстэй асуудлуудыг уян хатангүйгээр шийдэж болно. Гэхдээ дүрмээр бол эдгээр шийдлүүд нь "таяг" шиг байдаг - CSS-ийг зориулалтаас өөр зорилгоор ашиглах арга техник юм. Харин flexbox-ийн хувьд ийм даалгаврууд яг л уян хатан загварт зориулагдсан шиг шийдэгддэг.

CSS Flexible Box Layout Module (уян блок бүхий байрлалд зориулсан CSS модуль), товчхондоо flexbox нь янз бүрийн өргөн, өндөрт зохицсон HTML загваруудыг бүтээхэд гарсан дутагдлыг арилгах, зохион байгуулалтыг логик, энгийн болгох зорилгоор бүтээгдсэн. . Логик арга нь дүрмээр бол үр дүн нь шалгагдаагүй гэнэтийн газруудад ажилладаг - логик бол бүх зүйл юм!

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

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

FlexBox нь Контейнер ба түүний эд зүйлсээс (уян хатан элементүүд) бүрдэнэ.

Flexbox-г идэвхжүүлэхийн тулд аливаа HTML элементэд CSS шинж чанарыг зааж өгөхөд л хангалттай display:flex; эсвэл дэлгэц: inline-flex; .

Флексийн шинж чанарыг идэвхжүүлсний дараа савны дотор хоёр тэнхлэг үүсдэг: үндсэн ба хөндлөн (перпендикуляр (⊥), хөндлөн тэнхлэг). Бүх үүрлэсэн элементүүд (эхний түвшний) үндсэн тэнхлэгийн дагуу эгнээнд байрладаг. Анхдагч байдлаар, үндсэн тэнхлэг нь хэвтээ бөгөөд зүүнээс баруун тийш (→), хөндлөн тэнхлэг нь босоо, дээрээс доош чиглэсэн (↓).

Үндсэн ба хөндлөн тэнхлэгүүдийг сольж болох бөгөөд дараа нь элементүүдийг дээрээс доош (↓) байрлуулж, өндөрт тохирохгүй бол зүүнээс баруун тийш (→) шилжих болно - өөрөөр хэлбэл тэнхлэгүүдийг зүгээр л сольж болно. . Энэ тохиолдолд элементүүдийн зохион байгуулалтын эхлэл ба төгсгөл өөрчлөгдөхгүй - зөвхөн чиглэл (тэнхлэг) өөрчлөгдөнө! Ийм учраас та савны доторх тэнхлэгүүдийг төсөөлөх хэрэгтэй. Гэсэн хэдий ч "бие махбодийн" тэнхлэгүүд байдаг бөгөөд тэдгээр нь ямар нэгэн зүйлд нөлөөлдөг гэж бодож болохгүй. Энд байгаа тэнхлэг нь зөвхөн савны доторх элементүүдийн хөдөлгөөний чиглэл юм. Жишээлбэл, хэрэв бид үндсэн тэнхлэгийн төв рүү элементүүдийн зэрэгцүүлэлтийг зааж өгөөд дараа нь энэ үндсэн тэнхлэгийн чиглэлийг өөрчилсөн бол тэгшитгэл өөрчлөгдөнө: элементүүд нь дунд хэвтээ байрлалтай байсан, харин босоо тэнхлэгийн хувьд дунд нь болсон ... Жишээг харна уу.

Flexbox-ийн өөр нэг чухал шинж чанар бол хөндлөн чиглэлд эгнээ байгаа явдал юм. Бидний юу яриад байгааг ойлгохын тулд үндсэн хэвтээ тэнхлэг байгаа, олон элемент байгаа бөгөөд тэдгээр нь саванд "тохирохгүй" тул өөр эгнээ рүү шилждэг гэж төсөөлөөд үз дээ. Тэдгээр. чингэлэг нь иймэрхүү харагдаж байна: дотор нь хоёр эгнээ бүхий сав, мөр бүр нь хэд хэдэн элемент агуулсан. Танилцуулсан уу? Одоо бид зөвхөн элементүүдийг төдийгүй мөрүүдийг босоо байдлаар тэгшлэх боломжтой гэдгийг санаарай! Энэ нь хэрхэн ажилладаг нь үл хөдлөх хөрөнгийн жишээн дээр тодорхой харагдаж байна. Энэ нь схемийн дагуу иймэрхүү харагдаж байна:

Байршлын загварт нөлөөлж болох 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-basis нь зөвхөн үндсэн тэнхлэгт ажилладаг. Энэ нь flex-direction:row flex-basis нь өргөнийг, харин flex-direction:column-ийн тусламжтайгаар өндрийг хянадаг гэсэн үг юм. .

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

Үнэмлэхүй савны элементүүд уян хатан барилгад оролцдоггүй ... Энэ нь савны уян хатан элементүүд нь үнэмлэхүй байрлалтай бол тэдгээрт flex-basis нөлөөлөхгүй гэсэн үг юм: absolute . Тэд өргөн/өндөрийг зааж өгөх шаардлагатай.

• flex шинж чанарыг ашиглахдаа 3 утгыг (flex-grow/flex-shrink/flex-basis) нэгтгэж, товч бичиж болох боловч өргөнийг нэмэгдүүлэх эсвэл багасгахын тулд та тусад нь бичих хэрэгтэй. Жишээ нь: flex:0 0 50% == width:50%; уян хатан агшилт: 0; . Заримдаа энэ нь зүгээр л эвгүй байдаг.

Боломжтой бол уян хатан суурьтай хэвээр байгаарай. Зөвхөн уян хатан суурь нь тохиромжгүй үед өргөнийг ашиглана.

Флекс суурь ба өргөн хоорондын ялгаа - алдаа эсвэл онцлог уу?

Уян элементийн доторх агуулга нь түүнийг түлхэж, түүнээс цааш гарах боломжгүй. Гэсэн хэдий ч, хэрэв та өргөнийг 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: босоо; -ms-flex-wrap:wrap; -webkit-box-pack:justify; :зөвшөөрөх; -flex- negatif:2; -ms-flex-preferred-size: 1 2 100px; -webkit-box-ordinal; :3; ​​-ms-flex-order:2);

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

• (шинэ) - шинэ синтакс: дэлгэц: уян хатан; .
• (tweener) - 2011 оны хуучин албан бус синтакс: дэлгэц: flexbox; .
• (хуучин) - 2009 оны хуучин синтакс: дэлгэц: хайрцаг;

Видео

За, видеоны талаар бүү мартаарай, заримдаа энэ нь сонирхолтой бөгөөд ойлгомжтой байдаг. Энд хэд хэдэн алдартай нь байна:

Flex дээрх ашигтай холбоосууд

flexboxfroggy.com - flexbox боловсролын тоглоом.

Flexplorer бол харааны уян хатан код бүтээгч юм.

Мэдээллийн вэб сайтын загвар зохион байгуулалтын жишээг ашиглан Flexbox-той ажиллахад хэр хялбар байдаг талаар.

Надад итгээрэй, хэрэв та үүнийг одоо ашиглаж эхлэхийг хүсч байвал Flexbox-тэй ажиллах бүх талын нарийвчилсан дүн шинжилгээ хийх шаардлагагүй. Энэхүү гарын авлагад зохиогч таныг Flexbox-ын зарим шинж чанаруудтай танилцуулж, The Guardian вэб сайт дээр үзсэнтэй адил "мэдээний зураглал"-ыг бүтээх болно.

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

Явцгаая!

1. Хоёр багана үүсгэж эхэл

Хариуд нь Flexbox нь энэ үйл явцыг хялбаршуулж, хэд хэдэн давуу талтай, тухайлбал:

Цэвэрлэгч код бичих: бидний хийх ёстой зүйл бол дүрэмтэй сав үүсгэх явдал юм дэлгэц: уян хатан;
- уян хатан байдал: бид CSS-ийн хэд хэдэн мөрийг өөрчлөх замаар баганын хэмжээг өөрчлөх, сунгах, зэрэгцүүлэх боломжтой;
- семантик тэмдэглэгээ;
- Нэмж хэлэхэд, Flexbox-ийг ашигласнаар зохион байгуулалтын урьдчилан таамаглах боломжгүй үйлдлээс зайлсхийхийн тулд боодолыг цуцлах шаардлагагүй болно.

Хоёр багана үүсгэж эхэлцгээе, тэдгээрийн нэг нь манай савны өргөний 2/3, нэг нь 1/3-ийг эзэлнэ.

Контейнер багана;
- хоёр хүүхэд элемент багана, тэдгээрийн нэг нь нэмэлт ангитай үндсэн багана, баганыг илүү өргөн болгохын тулд бид хожим ашиглах болно.

Багана (дэлгэц: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Учир нь үндсэн багана-тэй тэнцүү уян хатан утгатай байна 2 , дараа нь энэ багана нь хоёр дахь баганаас хоёр дахин их зай эзэлнэ.

Бага зэрэг визуал дизайныг нэмээд эцэст нь бид дараахь зүйлийг авна.

Үйлдлийг харахын тулд товшино уу

2. Багана бүрийг flexbox сав болго

Тиймээс бидэнд нийтлэл хэрэгтэй:

Савны баганын дотор босоо байрлалтай;
- боломжтой бүх зайг эзэлсэн.

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

Үйлдлийг харахын тулд товшино уу

3. Бүтээгдэхүүнээс сав хийх

Гарчиг;
- догол мөр;
- зохиогчийн нэр, тайлбарын тоо бүхий мэдээллийн самбар;
- зарим төрлийн дасан зохицох зураг.

Энд бид Flexbox-ыг ашиглан мэдээллийн самбарыг элементийн доод хэсэгт түлхэж өгдөг. Эндээс бидний хүлээж буй үр дүнг хараарай.

Энд код нь өөрөө байна:

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

Үйлдлийг харахын тулд товшино уу

4. Хэд хэдэн үүрлэсэн багана нэмнэ

Суурилуулсан багана ( уян хатан: 2; )
Одоо энэ багана хоёр дахь баганаас хоёр дахин өргөн байх болно.

Үйлдлийг харахын тулд товшино уу

5. Эхний өгүүллийг хэвтээ байрлалтай хийх

Эхний нийтлэл ( flex-direction: row; ) .first- article . article-body ( flex: 1; ) .first- article .article-image ( өндөр: 300px; дараалал: 2; padding-top: 0; өргөн: 400px)
Өмч захиалга HTML тэмдэглэгээг өөрчлөхгүйгээр HTML элементийн дарааллыг өөрчлөх боломжийг олгодог тул энэ тохиолдолд том үүрэг гүйцэтгэдэг. Үнэндээ, нийтлэл-зурагкодонд энэ нь элементийн өмнө ирдэг нийтлэлийн бие, гэхдээ араас нь зогсож байгаа юм шиг аашилдаг.

Үйлдлийг харахын тулд товшино уу

6. Дасан зохицох зураглал хийх

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

Үүний үр дүнд бид зөвхөн шаардлагатай үед Flexbox ашиглан дасан зохицох байршлыг идэвхжүүлж болно.

Тиймээс бид устгах болно дэлгэц: уян хатансонгогчдоос .багануудТэгээд .багана, оронд нь тэдгээрийг медиа асуулгад "савлах":

@media дэлгэц ба (мин-өргөн: 800px) ( .columns, .column (дэлгэц: flex; ) )
Тэгээд л болоо! Бага нарийвчлалтай дэлгэц дээр бүх нийтлэлүүд бие биенийхээ дээр байрлах бөгөөд 800 пикселээс дээш нарийвчлалтай дэлгэц дээр хоёр баганад байрлана.

7. Төгсгөлийн өнгөлгөөг нэмэх

@media дэлгэц ба (мин-өргөн: 1000px) ( .эхний нийтлэл ( уян хатан чиглэл: мөр; ) . эхний нийтлэл . нийтлэлийн бие ( flex: 1; ) . эхний нийтлэл . нийтлэлийн зураг ( өндөр: 300px ; дараалал: 2; padding-top: 400px; .main-column (flex: 2; )
Эхний нийтлэлийн агуулгыг хэвтээ байдлаар байрлуулна: текст зүүн талд, зураг нь баруун талд байна. Мөн үндсэн багана одоо илүү өргөн болсон (75%). Энэ нь үүрлэсэн баганад (66%) хамаарна.

Тэгээд эцсийн үр дүн энд байна!

Үйлдлийг харахын тулд товшино уу

Дүгнэлт

Мэдээллийн вэб сайтын загвар зохион байгуулалтын жишээг ашиглан Flexbox-той ажиллахад хэр хялбар байдаг талаар.

Надад итгээрэй, хэрэв та үүнийг одоо ашиглаж эхлэхийг хүсч байвал Flexbox-тэй ажиллах бүх талын нарийвчилсан дүн шинжилгээ хийх шаардлагагүй. Энэхүү гарын авлагад зохиогч таныг Flexbox-ын зарим шинж чанаруудтай танилцуулж, The Guardian вэб сайт дээр үзсэнтэй адил "мэдээний зураглал"-ыг бүтээх болно.

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

Явцгаая!

1. Хоёр багана үүсгэж эхэл

Хариуд нь Flexbox нь энэ үйл явцыг хялбаршуулж, хэд хэдэн давуу талтай, тухайлбал:

Цэвэрлэгч код бичих: бидний хийх ёстой зүйл бол дүрэмтэй сав үүсгэх явдал юм дэлгэц: уян хатан;
- уян хатан байдал: бид CSS-ийн хэд хэдэн мөрийг өөрчлөх замаар баганын хэмжээг өөрчлөх, сунгах, зэрэгцүүлэх боломжтой;
- семантик тэмдэглэгээ;
- Нэмж хэлэхэд, Flexbox-ийг ашигласнаар зохион байгуулалтын урьдчилан таамаглах боломжгүй үйлдлээс зайлсхийхийн тулд боодолыг цуцлах шаардлагагүй болно.

Хоёр багана үүсгэж эхэлцгээе, тэдгээрийн нэг нь манай савны өргөний 2/3, нэг нь 1/3-ийг эзэлнэ.

Контейнер багана;
- хоёр хүүхэд элемент багана, тэдгээрийн нэг нь нэмэлт ангитай үндсэн багана, баганыг илүү өргөн болгохын тулд бид хожим ашиглах болно.

Багана (дэлгэц: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Учир нь үндсэн багана-тэй тэнцүү уян хатан утгатай байна 2 , дараа нь энэ багана нь хоёр дахь баганаас хоёр дахин их зай эзэлнэ.

Бага зэрэг визуал дизайныг нэмээд эцэст нь бид дараахь зүйлийг авна.

Үйлдлийг харахын тулд товшино уу

2. Багана бүрийг flexbox сав болго

Тиймээс бидэнд нийтлэл хэрэгтэй:

Савны баганын дотор босоо байрлалтай;
- боломжтой бүх зайг эзэлсэн.

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

Үйлдлийг харахын тулд товшино уу

3. Бүтээгдэхүүнээс сав хийх

Гарчиг;
- догол мөр;
- зохиогчийн нэр, тайлбарын тоо бүхий мэдээллийн самбар;
- зарим төрлийн дасан зохицох зураг.

Энд бид Flexbox-ыг ашиглан мэдээллийн самбарыг элементийн доод хэсэгт түлхэж өгдөг. Эндээс бидний хүлээж буй үр дүнг хараарай.

Энд код нь өөрөө байна:

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

Үйлдлийг харахын тулд товшино уу

4. Хэд хэдэн үүрлэсэн багана нэмнэ

Суурилуулсан багана ( уян хатан: 2; )
Одоо энэ багана хоёр дахь баганаас хоёр дахин өргөн байх болно.

Үйлдлийг харахын тулд товшино уу

5. Эхний өгүүллийг хэвтээ байрлалтай хийх

Эхний нийтлэл ( flex-direction: row; ) .first- article . article-body ( flex: 1; ) .first- article .article-image ( өндөр: 300px; дараалал: 2; padding-top: 0; өргөн: 400px)
Өмч захиалга HTML тэмдэглэгээг өөрчлөхгүйгээр HTML элементийн дарааллыг өөрчлөх боломжийг олгодог тул энэ тохиолдолд том үүрэг гүйцэтгэдэг. Үнэндээ, нийтлэл-зурагкодонд энэ нь элементийн өмнө ирдэг нийтлэлийн бие, гэхдээ араас нь зогсож байгаа юм шиг аашилдаг.

Үйлдлийг харахын тулд товшино уу

6. Дасан зохицох зураглал хийх

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

Үүний үр дүнд бид зөвхөн шаардлагатай үед Flexbox ашиглан дасан зохицох байршлыг идэвхжүүлж болно.

Тиймээс бид устгах болно дэлгэц: уян хатансонгогчдоос .багануудТэгээд .багана, оронд нь тэдгээрийг медиа асуулгад "савлах":

@media дэлгэц ба (мин-өргөн: 800px) ( .columns, .column (дэлгэц: flex; ) )
Тэгээд л болоо! Бага нарийвчлалтай дэлгэц дээр бүх нийтлэлүүд бие биенийхээ дээр байрлах бөгөөд 800 пикселээс дээш нарийвчлалтай дэлгэц дээр хоёр баганад байрлана.

7. Төгсгөлийн өнгөлгөөг нэмэх

@media дэлгэц ба (мин-өргөн: 1000px) ( .эхний нийтлэл ( уян хатан чиглэл: мөр; ) . эхний нийтлэл . нийтлэлийн бие ( flex: 1; ) . эхний нийтлэл . нийтлэлийн зураг ( өндөр: 300px ; дараалал: 2; padding-top: 400px; .main-column (flex: 2; )
Эхний нийтлэлийн агуулгыг хэвтээ байдлаар байрлуулна: текст зүүн талд, зураг нь баруун талд байна. Мөн үндсэн багана одоо илүү өргөн болсон (75%). Энэ нь үүрлэсэн баганад (66%) хамаарна.

Тэгээд эцсийн үр дүн энд байна!

Үйлдлийг харахын тулд товшино уу

Дүгнэлт

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

Нэгэн сайхан үдэш бидний чат 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-тэй адил бөгөөд энэ нь тодорхой элементийн зэрэгцүүлэлтийг хүчингүй болгох боломжийг олгодог.

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

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

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

Бид 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-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Та элементүүдийг хэвтээ болон босоо байдлаар хялбархан зэрэгцүүлж, элементүүдийн харуулах чиглэл, дарааллыг өөрчлөх, блокуудыг эцэг эхийн бүрэн өндрөөр сунгах эсвэл доод ирмэг хүртэл хадаж болно.

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 - элементүүд нь үндсэн тэнхлэгийн төгсгөлөөс зэрэгцсэн; төв - элементүүд нь үндсэн тэнхлэгийн төвд нийцсэн; хоорондын зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, хоорондоо чөлөөт зайг хуваарилдаг; эргэн тойрон дахь орон зай - элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулж, тэдгээрийн эргэн тойронд чөлөөт орон зайг хуваарилдаг; сунгах - бүх өндрийг дүүргэхийн тулд элементүүдийг сунгасан (үндсэн утга).

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

төв, сунгах

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

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

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

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

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

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