Salom, habr!

Ajoyib oqshomlarning birida, qiziqarli narsalarni oldindan aytib bermasdan, bizning suhbatimiz 2012 yil bahorida yozgan "5 haqiqatan ham foydali javob beruvchi belgilash shablonlarini kodga tarjima qilish" nashri muallifidan FlexBox-dan foydalangan holda remeyk maqolasini yozish taklifini oldi. va nima va qanday ishlashi haqida hamrohlik qiluvchi tushuntirish. Ba'zi shubhalardan so'ng, spetsifikatsiyani chuqurroq tushunishga bo'lgan qiziqish hamon g'alaba qozondi va men o'sha misollarni yozish uchun o'tirdim. Biz bu sohaga sho'ng'ib ketganimizdan so'ng, ko'plab nuanslar aniq bo'la boshladi, bu esa shunchaki tartiblarni qayta loyihalashdan ko'ra ko'proq narsaga aylandi. Umuman olganda, ushbu maqolada men "CSS Flexible Box Layout Module" deb nomlangan ajoyib spetsifikatsiya haqida gapirmoqchiman va uning ba'zilarini ko'rsatmoqchiman. qiziqarli xususiyatlar va qo'llash misollari. Men barcha qiziqqanlarni hackga qo'shilishga taklif qilaman.

Men sizning e'tiboringizni qaratmoqchimanki, FlexBox-da tartib yaratish uchun ishlab chiquvchiga ma'lum darajada moslashish kerak bo'ladi. O'z misolimdan ko'p yillik tajribam shafqatsiz hazil o'ynayotganini his qildim. FlexBox elementlarni oqimga joylashtirish haqida biroz boshqacha fikrlashni talab qiladi.

Texnik qism

Har qanday misollarga o'tishdan oldin, ushbu spetsifikatsiyaga qanday xususiyatlar kiritilganligini va ular qanday ishlashini tushunishga arziydi. Chunki ularning ba'zilari dastlab unchalik aniq emas, ba'zilari esa haqiqatga hech qanday aloqasi bo'lmagan afsonalar bilan o'ralgan.

Shunday qilib. FlexBox-da ikkita asosiy turdagi elementlar mavjud: Flex Container va uning bolalar elementlari- Moslashuvchan element. Konteynerni ishga tushirish uchun elementga CSS orqali tayinlang displey: moslashuvchan; yoki displey: inline-flex;. Flex va inline-flex o'rtasidagi farq faqat displeyga o'xshash konteynerni o'rab turgan elementlar bilan o'zaro ta'sir qilish printsipida: blok; va displey: mos ravishda inline-block;.

Moslashuvchan konteyner ichida ikkita eksa yaratiladi, asosiy o'q va perpendikulyar yoki o'zaro faoliyat o'qi. Ko'pincha moslashuvchan elementlar asosiy eksa bo'ylab, keyin esa o'zaro faoliyat o'qi bo'ylab hizalanadi. Odatiy bo'lib, asosiy o'q gorizontal va chapdan o'ngga, o'zaro faoliyat o'qi esa vertikal va yuqoridan pastga yo'naltirilgan.

O'qlarning yo'nalishi CSS xususiyati yordamida boshqarilishi mumkin moslashuvchan yo'nalish. Bu xususiyat bir qator qiymatlarni oladi:
qator(standart): Moslashuvchan konteynerning asosiy o'qi joriy qator yo'nalishi rejimining ichki o'qi bilan bir xil yo'nalishga ega. Asosiy o'q yo'nalishining boshlanishi (asosiy boshlanish) va oxiri (asosiy oxiri) ichki o'qning boshlanishi (inline-start) va oxiriga (inline-end) mos keladi.
qator-teskari: Hammasi qatordagi bilan bir xil, faqat asosiy start va asosiy oxiri almashtiriladi.
ustun: qator bilan bir xil, faqat hozir asosiy o'q yuqoridan pastga yo'naltirilgan.
ustun-teskari: qator-teskari bilan bir xil, faqat asosiy o'q pastdan yuqoriga yo'naltiriladi.
Bu qanday ishlashini jsfiddle misolida ko'rishingiz mumkin.

Odatiy bo'lib, konteynerdagi barcha moslashuvchan elementlar bir qatorga joylashtiriladi, hatto ular konteynerga mos kelmasa ham, ular chegaralaridan tashqariga chiqadi. Bu xususiyat xususiyat yordamida almashtiriladi egiluvchan o'rash. Bu mulk uchta holatga ega:
hozir rap(standart): Flex elementlari chapdan o'ngga bir qatorda joylashgan.
o'rash: moslashuvchan elementlar ko'p chiziqli rejimda qurilgan, uzatish o'zaro faoliyat o'qi yo'nalishi bo'yicha, yuqoridan pastgacha amalga oshiriladi.
o'rash-teskari: o'rash bilan bir xil, lekin pastdan yuqoriga o'raladi.
Keling, bir misolni ko'rib chiqaylik.

Qulaylik uchun qo'shimcha mulk mavjud moslashuvchan oqim, unda siz bir vaqtning o'zida belgilashingiz mumkin moslashuvchan yo'nalish Va egiluvchan o'rash. Bu shunday ko'rinadi: moslashuvchan oqim:

Idishdagi elementlar xususiyat yordamida hizalanishi mumkin asoslash-mazmun asosiy o'q bo'ylab. Bu xususiyat beshtagacha ko'proq vaqtni oladi turli xil variantlar qiymatlar.
moslashuvchan boshlash(standart): Flex elementlari asosiy o'qning kelib chiqishiga to'g'ri keladi.
moslashuvchan uchi: elementlar asosiy o'qning oxiriga to'g'ri keladi
markaz: Elementlar asosiy o'qning markaziga to'g'ri keladi
bo'sh joy - orasidagi: elementlar idishdagi barcha mavjud kenglikni egallaydi, eng tashqi elementlar idishning chetlariga mahkam bosiladi va bo'sh joy elementlar o'rtasida teng ravishda taqsimlanadi.
bo'sh joy - atrofida: Moslashuvchan elementlar bo'sh joy elementlar o'rtasida teng taqsimlanishi uchun hizalanadi. Ammo shuni ta'kidlash kerakki, idishning cheti va tashqi elementlar orasidagi bo'shliq qatorning o'rtasida joylashgan elementlar orasidagi bo'shliqning yarmiga teng bo'ladi.
Albatta, siz ushbu xususiyat qanday ishlashiga oid misolni bosishingiz mumkin.

Bu hammasi emas, biz elementlarni o'zaro faoliyat o'qi bo'ylab tekislash imkoniyatiga egamiz. Mulkni qo'llash orqali moslamalar, bu ham besh xil qiymatni oladi, siz qiziqarli xatti-harakatlarga erishishingiz mumkin. Bu xususiyat qatordagi elementlarni bir-biriga nisbatan tekislash imkonini beradi.
moslashuvchan boshlash: barcha elementlar satr boshiga suriladi
moslashuvchan uchi: elementlar qator oxirigacha suriladi
markaz: elementlar qatorning o'rtasiga tekislanadi
asosiy chiziq: Elementlar matnning asosiy chizig'iga tekislanadi
cho'zish(standart): elementlar butun chiziqni to'ldirish uchun cho'ziladi.

Oldingi xususiyatga o'xshash yana bir xususiyat tekislash-tarkib. Bu moslashuvchan konteynerga nisbatan butun chiziqlarni tekislash uchun yagona mas'uldir. Agar egiluvchan elementlar bir qatorni egallasa, bu hech qanday ta'sir qilmaydi. Mulk olti xil qiymatni oladi.
moslashuvchan boshlash: barcha chiziqlar ko'ndalang o'qning boshiga bosiladi
moslashuvchan uchi: barcha chiziqlar ko'ndalang o'qning oxirigacha bosiladi
markaz: Barcha to'plam chiziqlari ko'ndalang o'qning markaziga to'g'ri keladi
bo'sh joy - orasidagi: chiziqlar yuqori chetidan pastgacha taqsimlanadi, chiziqlar orasidagi bo'sh joy qoldiriladi, eng tashqi chiziqlar esa idishning chetlariga bosiladi.
bo'sh joy - atrofida: Chiziqlar konteyner bo'ylab teng ravishda taqsimlanadi.
cho'zish(standart): chiziqlar barcha mavjud bo'sh joyni egallash uchun cho'zilgan.
Ushbu misolda align-elementlar va align-content qanday ishlashini sinab ko'rishingiz mumkin. Men ushbu ikkita xususiyatni bitta misolda keltirdim, chunki ular bir-biri bilan chambarchas bog'liq, har biri o'z vazifasini bajaradi. Elementlar bir satrga yoki bir nechta satrlarga joylashtirilganda nima sodir bo'lishiga e'tibor bering.

Biz moslashuvchan idishning parametrlarini saralab oldik, qolgan narsa egiluvchan elementlarning xususiyatlarini aniqlashdir.
Biz tanishadigan birinchi mulk - bu buyurtma. Bu xususiyat oqimdagi ma'lum bir elementning o'rnini o'zgartirishga imkon beradi. Odatiy bo'lib, barcha moslashuvchan elementlar mavjud tartib: 0; va tabiiy oqim tartibida qurilgan. Misolda, agar ularga turli xil tartib qiymatlari qo'llanilsa, elementlar qanday almashtirilishini ko'rishingiz mumkin.

Asosiy xususiyatlardan biri moslashuvchan asos. Ushbu xususiyat yordamida biz moslashuvchan elementning asosiy kengligini belgilashimiz mumkin. Standart qiymat avto. Bu mulk bilan chambarchas bog'liq egiluvchan o'sadi Va egiluvchan qisqarish, bu haqda biroz keyinroq gaplashaman. px, %, em va boshqa birliklarda kenglik qiymatini qabul qiladi. Aslida, bu egiluvchan elementning kengligi emas, bu o'ziga xos boshlang'ich nuqtadir. Elementning cho'zilishi yoki qisqarishiga nisbatan. Avtomatik rejimda element uning ichidagi tarkibga nisbatan tayanch kengligini oladi.

egiluvchan o'sadi bir nechta manbalarda u butunlay noto'g'ri tavsifga ega. Unda aytilishicha, u konteynerdagi elementlarning o'lchamlari nisbatini o'rnatadi. Aslida bu haqiqat emas. Bu xususiyat, agar mavjud bo'lsa, elementning kattalashtirish koeffitsientini belgilaydi bo'sh joy konteynerda. Odatiy bo'lib, bu xususiyat 0 qiymatiga ega. Tasavvur qilaylik, bizda kengligi 500px bo'lgan moslashuvchan konteyner bor, uning ichida ikkita moslashuvchan element mavjud, ularning har biri taglik kengligi 100px. Bu konteynerda yana 300px bo'sh joy qoldiradi. Agar flex-grow ni belgilasak: 2; birinchi element uchun, flex-grow: 1; ikkinchi element uchun. Natijada, bu bloklar konteynerning barcha mavjud kengligini egallaydi, faqat birinchi blokning kengligi 300px, ikkinchisi esa atigi 200px bo'ladi. Nima bo'ldi? Nima bo'ldi, konteynerdagi mavjud 300px bo'sh joy elementlar o'rtasida 2:1 nisbatda taqsimlangan, birinchisi uchun +200px va ikkinchisi uchun +100px. Bu aslida qanday ishlaydi.

Bu erda biz muammosiz boshqa shunga o'xshash xususiyatga o'tamiz, ya'ni egiluvchan qisqarish. Standart qiymat 1. Bundan tashqari, elementlarning kengligini faqat teskari yo'nalishda o'zgartirish uchun omilni o'rnatadi. Agar idishning kengligi bo'lsa Ozroq elementlarning asosiy kengligi yig'indisidan ko'ra, bu xususiyat kuchga kiradi. Masalan, konteynerning kengligi 600px, elementlarning moslashuvchan asosi esa 300px. Birinchi elementga flex-shrink: 2;, ikkinchi elementga esa flex-shrink: 1; bering. Endi konteynerni 300px ga qisqartiramiz. Shuning uchun elementlarning kengligi yig'indisi konteynerdan 300px kattaroqdir. Bu farq 2: 1 nisbatda taqsimlanadi, shuning uchun biz birinchi blokdan 200 pikselni, ikkinchisidan 100 pikselni olib tashlaymiz. Elementlarning yangi hajmi birinchi va ikkinchi element uchun mos ravishda 100px va 200px. Agar biz flex-shrink ni 0 ga qo'ysak, u holda biz elementning asosiy kengligidan kichikroq hajmgacha qisqarishini oldini olamiz.

Aslida, bu aniq bo'lishi uchun bularning barchasi qanday ishlashining juda soddalashtirilgan tavsifi umumiy tamoyil. Batafsilroq, agar kimdir manfaatdor bo'lsa, algoritm spetsifikatsiyada tasvirlangan.

Barcha uchta xususiyat ifoda yordamida qisqartirilgan shaklda yozilishi mumkin moslashuvchan. Bu shunday ko'rinadi:
moslashuvchan: ;
Va yana ikkita qisqartirilgan versiyani yozishimiz mumkin, moslashuvchan: avtomatik; Va moslashuvchan: yo'q;, nimani anglatadi moslashuvchan: 1 1 avtomatik; Va moslashuvchan: 0 0 avtomatik; mos ravishda.

Moslashuvchan elementlarning oxirgi xususiyati saqlanib qoladi o'z-o'zini tekislash. Bu erda hamma narsa oddiy, u konteyner uchun align-elementlar bilan bir xil, bu sizga ma'lum bir element uchun hizalanishni bekor qilishga imkon beradi.

Bo'ldi, men bundan charchadim! Misollar keltiring!

Biz texnik qismni saralab oldik, bu juda uzun bo'lib chiqdi, lekin siz unga kirishingiz kerak. Endi biz amaliy dasturga o'tishimiz mumkin.
Ushbu "haqiqatdan ham foydali beshta javob beruvchi tartib shablonlarini" ishlab chiqish jarayonida biz ishlab chiquvchilar tez-tez duch keladigan odatiy vaziyatlarni hal qilishimiz kerak edi. Flexbox yordamida ushbu echimlarni amalga oshirish osonroq va moslashuvchan bo'ladi.
Keling, xuddi shu to'rtinchi tartibni olaylik, chunki ... unda eng qiziqarli elementlar mavjud.

Birinchidan, sahifaning asosiy kengligini belgilaymiz, uni o'rtaga to'g'rilaymiz va pastki ko'rsatkichni sahifaning pastki qismiga bosing. Umuman olganda, har doimgidek.

Html (fon: #ccc; min-balandlik: 100%; shrift-family: sans-serif; displey: -webkit-flex; displey: flex; flex-yo'nalishi: ustun; ) tanasi (chegara: 0; to'ldirish: 0 15px ; displey: -webkit-flex; displey: moslashuvchan; moslashuvchan yo'nalish: ustun; flex: avtomatik; ) .sarlavha (kenglik: 100%; maksimal kenglik: 960px; minimal kenglik: 430px; chekka: 0 avtomatik 30px; to'ldirish : 30px 0 10px; displey: -webkit-flex; displey: flex; flex-wrap: o'rash; oqlash-tarkib: bo'sh joy; quti o'lchami: chegara-box; ) .main (kenglik: 100%; maksimal kenglik) : 960px; min. kenglik: 430px; chekka: avtomatik; flex-grow: 1; quti oʻlchami: chegara qutisi; ) .footer (fon: #222; kenglik: 100%; maksimal kenglik: 960px; min. kenglik : 430px; rang: #eee; chekka: avtomatik; toʻldirish: 15px; quti oʻlchami: chegara qutisi; )

Flex-grow ni belgilaganimiz sababli: .main uchun 1; u to'liq mavjud balandlikka cho'ziladi va shu bilan pastki qismni pastga bosadi. Ushbu yechimdagi bonus shundaki, altbilgi aniq bo'lmagan balandlikda bo'lishi mumkin.

Endi logotip va menyuni sarlavhaga joylashtiramiz.
.logo (shrift o'lchami: 0; cheti: -10px 10px 10px 0; displey: flex; flex: yo'q; align-elementlar: markaz; ) .logo: oldin, .logo: keyin ( kontent: ""; displey: blok ; ) .logo:before (fon: #222; eni: 50px; balandlik: 50px; hoshiya: 0 10px 0 20px; chegara radiusi: 50%; ) .logo:after (fon: #222; kenglik: 90px; balandlik : 30px; ) .nav (chegara: -5px 0 0 -5px; displey: -webkit-flex; displey: flex; flex-wrap: wrap; ) .nav-itm (fon: #222; kenglik: 130px; balandlik: 50px; shrift oʻlchami: 1.5rem; rang: #eee; matn bezatish: yoʻq; chekka: 5px 0 0 5px; displey: -webkit-flex; displey: flex; justify-content: markaz; align-elementlar: markaz; )

Sarlavhada flex-wrap mavjud bo'lgani uchun: wrap; va asoslash-tarkib: bo'sh joy - orasida; Logotip va menyu sarlavhaning turli tomonlarida tarqalgan va agar menyu uchun etarli joy bo'lmasa, u logotip ostida oqlangan tarzda harakatlanadi.

Keyin biz katta post yoki bannerni ko'ramiz, bu aniq nima ekanligini aytish qiyin, lekin bu gap emas. O'ng tomonda rasm va chap tomonda sarlavhali matn mavjud. Shaxsan men tartib moslashtirilgan yoki statik bo'lishidan qat'i nazar, har qanday elementlar iloji boricha moslashuvchan bo'lishi kerak degan fikrga amal qilaman. Shunday qilib, ushbu postda bizda rasm joylashtirilgan yon panel bor; aniq qilib aytganda, bizga qanday kenglik kerakligini aniq ayta olmaymiz, chunki bugun bizda katta rasm bor, ertaga kichik va biz elementni qayta tiklashni xohlamaymiz. har safar noldan. Bu shuni anglatadiki, bizga kerakli joyni olish uchun yon panel kerak va qolgan bo'sh joy tarkibga o'tadi. Keling buni qilamiz:

Box (shrift o'lchami: 1,25rem; chiziq balandligi: 1,5; shrift uslubi: kursiv; cheti: 0 0 40px -50px; displey: -webkit-flex; displey: flex; flex-wrap: o'rash; justify-content: markaz; ) .box-base (chet-chap: 50px; flex: 1 0 430px; ) .box-side (chet-chap: 50px; flex: yoʻq; ) .box-img ( maksimal kenglik: 100%; balandlik : avtomatik;)

Ko'rib turganingizdek, bizda sarlavha va matn mavjud bo'lgan .box-base uchun men asosiy kenglikni ko'rsatdim moslashuvchan asos: 430px;, va shuningdek, foydalanish taqiqlangan blok qisqarishi moslashuvchan qisqarish: 0;. Ushbu manipulyatsiya bilan biz kontentning kengligi 430px dan kam bo'lmasligini aytdik. Va .box uchun men ko'rsatgan haqiqatni hisobga olgan holda flex-o'rash: o'rash; yon panel va kontent container.box-ga mos kelmasa, yon panel avtomatik ravishda kontent ostiga tushadi. Va bularning barchasi dastursiz @media! Menimcha, bu haqiqatan ham juda zo'r.

Bizda uchta ustunli tarkib qoldi. Ushbu muammoning bir nechta echimlari bor, men ulardan birini ko'rsataman; boshqa maketlarda yana bir variant mavjud.
Keling, konteyner yaratamiz, uni .content deb nomlaymiz va uni sozlaymiz.
.content (pastki chekka: 30px; displey: -webkit-flex; displey: flex; flex-wrap: o‘rash; )

Konteynerda uchta ustun, .bannerlar, .posts, .comments mavjud
.bannerlar ( flex: 1 1 200px; ) .posts (chegara: 0 0 30px 30px; flex: 1 1 200px; ) .comments (chegara: 0 0 30px 30px; flex: 1 1 200px; )

Ustunlar juda toraymasligi uchun ustunlarga 200px tayanch kengligi berdim, lekin kerak bo'lganda ular bir-birining ostiga o'tkazilsa yaxshi bo'lardi.

Tartibga ko'ra, biz @mediasiz kontent bilan ishlay olmaymiz, shuning uchun ustunlar harakatini kenglik uchun biroz ko'proq moslashtiramiz.<800px и <600px.
@media ekrani va (maksimal kenglik: 800px) ( .bannerlar (chap chekka: -30px; displey: -webkit-flex; displey: flex; moslashuvchan asos: 100%; ) .posts (chekka-chap: 0; ) ) @media ekrani va (maksimal kenglik: 600px) ( .kontent (displey: blok; ) .bannerlar ( chekka: 0; displey: blok; ) .sharhlar ( chekka: 0; ) )

FlexBox-da maket yaratish haqida gap ketganda sehrli narsa shu. Menga yoqqan yana bir vazifa 5-chi maketda, xususan, tarkibni moslashtirish bilan bog'liq.

Ish stoli o'lchamlarida postlar ketma-ket uchta to'rda qanday qurilganligini ko'ramiz. Ko'rish maydonining kengligi 800px dan kam bo'lganda, panjara postlar joylashgan ustunga aylanadi, bu erda post fotosurati post mazmunining chap va o'ng tomonida navbat bilan joylashtiriladi. Va agar kengligi 600px dan kam bo'lsa, post fotosurati butunlay yashiriladi.
.grid (displey: -webkit-flex; displey: flex; flex-wrap: o‘rash; oqlash-kontent: bo‘sh joy; ) .grid-itm (pastki chekka: 30px; flex-basis: calc(33,33% - 30px) * 2/3); displey: -webkit-flex; displey: flex; flex-wrap: wrap; ) .grid-img (chegara: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title (matnni tekislash: markaz; ) @media ekrani va (maksimal kenglik: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ). grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(juft) .grid-img (chegara: 0 0 0 30px; tartib: 2; ) .grid-itm:nth-child(toq) .grid-img ( chegara: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title (matnni tekislash: chap; ) ) @media ekrani va (maksimal kenglik: 600px) ( .grid-img (ko'rsatish: yo'q; ) )

Aslida, bu FlexBox bilan amalga oshirilishi mumkin bo'lgan narsalarning faqat kichik bir qismi. Spetsifikatsiya oddiy kod yordamida juda murakkab sahifa tartiblarini yaratishga imkon beradi.

Flexbox (Moslashuvchan quti tartibi moduli) spetsifikatsiyasi- elementlarni gorizontal yoki vertikal yo'nalishda joylashtirish usuli.

Flexbox ota-ona moslashuvchan konteyner va pastki moslashuvchan elementlar uchun xususiyatlar to'plamini birlashtiradi.

Element moslashuvchan konteynerga aylanishi uchun uni tayinlash kerak displey: moslashuvchan; yoki displey: inline-flex;(mos ravishda blok yoki chiziq).

Moslashuvchan konteyner ichida ikkita eksa yaratilgan: asosiy va unga perpendikulyar ko'ndalang o'qlar. Birinchidan, egiluvchan elementlar asosiy o'q bo'ylab, keyin esa ko'ndalang bo'ylab hizalanadi.

Flex konteyner xususiyatlari
moslashuvchan yo'nalish	Asosiy o'qning yo'nalishini belgilaydi. Mumkin qiymatlar: qator– chapdan o‘ngga (standart); qator-teskari- o'ngdan chapga; ustun- yuqoridan pastga; ustun-teskari- pastga yuqoriga.
egiluvchan o'rash	Idishning ko'p qatorli yoki yo'qligini aniqlaydi. Mumkin qiymatlar: hozir rap- egiluvchan elementlar bir qatorda joylashgan, agar ular idishga to'g'ri kelmasa, ular uning chegarasidan tashqariga chiqadi (sukut bo'yicha); o'rash– egiluvchan elementlar bir qatorga to‘g‘ri kelmasa, bir necha qatorda qatorlanadi; o'rash-teskari- o'xshash o'rash, lekin uzatish pastdan yuqoriga sodir bo'ladi.
moslashuvchan oqim	Bir vaqtning o'zida ikkita parametrni aniqlaydi: flex-direction va flex-wrap. Misol uchun, flex-flow: ustunni o'rash;
asoslash-mazmun	Asosiy o'q bo'ylab elementlarning tekislanishini aniqlaydi. Mumkin qiymatlar: moslashuvchan boshlash– moslashuvchan elementlar asosiy o'qning boshiga bosiladi (sukut bo'yicha); moslashuvchan uchi– moslashuvchan elementlar asosiy o'qning oxiriga bosiladi; markaz- egiluvchan elementlar asosiy o'qning markaziga to'g'ri keladi; bo'sh joy - orasidagi- moslashuvchan elementlar asosiy o'q bo'ylab taqsimlanadi, birinchi element o'qning boshiga, oxirgisi esa oxirigacha bosiladi; bo'sh joy - atrofida- egiluvchan elementlar asosiy o'q bo'ylab taqsimlanadi, bo'sh joy elementlar o'rtasida teng taqsimlanadi. Ammo shuni ta'kidlash kerakki, bo'shliqlar qo'shiladi va elementlar orasidagi masofa idishning chetlari va eng tashqi elementlar orasidagi masofadan ikki baravar katta.
moslamalar	Elementlarning ko'ndalang o'qi bo'ylab tekislanishini aniqlaydi. Mumkin qiymatlar: moslashuvchan boshlash– moslashuvchan elementlar ko'ndalang o'qning boshiga bosiladi (sukut bo'yicha); moslashuvchan uchi– egiluvchan elementlar ko‘ndalang o‘qning oxiriga bosiladi; markaz- egiluvchan elementlar ko'ndalang o'qning markaziga to'g'ri keladi; asosiy chiziq- egiluvchan elementlar asosiy chiziq bo'ylab hizalanadi. Asosiy chiziq - "d", "r", "ts", "sch" harflari kabi o'simtalarni hisobga olmagan holda, belgilarning pastki cheti bo'ylab o'tadigan xayoliy chiziq; cho'zish- egiluvchan elementlar cho'zilib, ko'ndalang o'q bo'ylab barcha mavjud bo'sh joyni egallaydi. Ammo agar elementlar ma'lum balandlikka ega bo'lsa, unda cho'zish e'tibordan chetda qoladi.
tekislash-tarkib	Moslashuvchan elementlarning butun qatorlarining o'zaro o'qlarni tekislashini aniqlaydi. Mumkin qiymatlar: moslashuvchan boshlash– moslashuvchan elementlarning qatorlari ko'ndalang o'qning boshiga bosiladi (sukut bo'yicha); moslashuvchan uchi- egiluvchan elementlarning qatorlari ko'ndalang o'qning oxiriga bosiladi; markaz- egiluvchan elementlarning qatorlari ko'ndalang o'qning markaziga to'g'ri keladi; bo'sh joy - orasidagi- egiluvchan elementlarning qatorlari ko'ndalang o'q bo'ylab taqsimlanadi, birinchi qator o'qning boshiga, oxirgisi esa oxirigacha bosiladi; bo'sh joy - atrofida- egiluvchan elementlarning qatorlari ko'ndalang o'q bo'ylab taqsimlanadi, bo'sh joy qatorlar orasida teng taqsimlanadi. Ammo shuni ta'kidlash kerakki, bo'shliqlar qo'shiladi va chiziqlar orasidagi masofa idishning qirralari va eng tashqi chiziqlar orasidagi masofadan ikki baravar katta. cho'zish- ko'ndalang o'q bo'ylab barcha mavjud bo'sh joyni egallab, egiluvchan elementlarning qatorlari cho'ziladi. Ammo agar elementlar ma'lum balandlikka ega bo'lsa, unda cho'zish e'tibordan chetda qoladi. Bu xususiyat bir qatorli moslashuvchan konteyner uchun ishlamaydi.

Flex Element xususiyatlari
buyurtma	Egiluvchan konteyner ichida bitta moslashuvchan element paydo bo'lish tartibini aniqlaydi. Butun son sifatida belgilangan. Standart 0, keyin elementlar tabiiy oqim tartibida bir-birini kuzatib boradi. Ma'nosi buyurtma elementning mutlaq holatini emas, balki ketma-ketlikdagi joylashuvining og'irligini belgilaydi.
moslashuvchan asos	Konteyner ichida joy ajratishdan oldin moslashuvchan elementning asosiy hajmini belgilaydi. px, %, em va boshqa oʻlchov birliklarida koʻrsatilishi mumkin. Aslida, bu elementning cho'zilgan yoki siqilganiga nisbatan boshlang'ich nuqtasidir. Standart qiymat - avto, ichki tarkibning o'lchamiga qarab elementning o'lchami bilan.
egiluvchan o'sadi	Egiluvchan element uning asosiy hajmiga konteyner ichida qancha bo'sh joy qo'shishini aniqlaydi. Proportsiya vazifasini bajaradigan butun son bilan belgilangan. Standart 0. Agar barcha elementlar bo'lsa moslashuvchan o'sish: 1, keyin ularning barchasi bir xil o'lchamda bo'ladi. Agar siz bitta moslashuvchan elementni 2 ga o'rnatsangiz, u asosiy hajmiga boshqalarga qaraganda ikki baravar ko'p qo'shiladi.
egiluvchan qisqarish	Qanchalik aniqlaydi, agar etarli joy bo'lmasa, egiluvchan element egiluvchan konteyner ichidagi qo'shni elementlarning qisqarishiga nisbatan qisqaradi. Proportsiya vazifasini bajaradigan butun son bilan belgilangan. Standart 1. Agar bitta moslashuvchan element o'rnatilgan bo'lsa moslashuvchan qisqarish: 2, keyin idish o'z ichiga olgan elementlarning asosiy o'lchamlari yig'indisidan kichikroq bo'lsa, uning asosiy o'lchamidan boshqalarga qaraganda ikki barobar ko'p ayiriladi.
moslashuvchan	Bir vaqtning o'zida uchta parametrni aniqlaydi: flex-grow, flex-shrink, flex-basis. Masalan, flex: 1 1 200px;
o'z-o'zini tekislash	Standart tekislashni bekor qiladi yoki moslamalar, ma'lum bir moslashuvchan element uchun. Mumkin qiymatlar: moslashuvchan boshlash– egiluvchan element ko‘ndalang o‘qning boshiga bosiladi (sukut bo‘yicha); moslashuvchan uchi– egiluvchan element ko‘ndalang o‘qning oxiriga bosiladi; markaz- egiluvchan element ko'ndalang o'qning markaziga to'g'ri keladi; asosiy chiziq- moslashuvchan element asosiy chiziqqa to'g'ri keladi; cho'zish- egiluvchan elementlar cho'ziladi, ko'ndalang o'q bo'ylab barcha mavjud bo'sh joyni egallaydi. Ammo agar balandlik berilgan bo'lsa, unda cho'zish e'tibordan chetda qoladi.

Flexbox-dan amalda foydalanish xususiyatlari

1. To'g'ri tekislash

Internet-texnologiyalari, jumladan HTML va CSS-ning rivojlanishi bilan veb-saytlar yaratish uchun doimiy ravishda ishlab chiquvchilar uchun yangi imkoniyatlar ochiladi. Muammolardan biri brauzerlarning eskirgan versiyalarining mavjudligi bo'lib qolmoqda. Bu asosan Internet Explorer-ga, ayniqsa Windows XP-dan foydalanadiganlar uchun amal qiladi.

Internet-sahifa dizayni dizayneri ko'pincha sahifadagi CSS bloklarini tekislash vazifasiga duch keladi. Masalan, siz barcha bloklarni birin-ketin gorizontal ravishda joylashtirishingiz, ularni markazga yoki idishning pastki qismiga joylashtirishingiz mumkin va hokazo. Displey - flex xususiyat parametrining paydo bo'lishi bilan bu vazifa juda soddalashtirilgan. Ushbu texnologiya asosiy elementlarni, ya'ni blok yoki konteyner ichidagi elementlarni joylashtirish uchun mo'ljallangan. Ushbu tartibning parametrlari juda etarli.

Shunday qilib, birinchi navbatda, siz ota-ona konteynerini yaratishingiz kerak. Keling, aniqlik uchun uning atrofida ramka paydo bo'lishi uchun uni yarataylik. Konteyner uchun CSS kodi quyidagicha bo'ladi:

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content:cho'zish;
}

Asosiy mulk hisoblanadi ko'rsatish: moslashuvchan. Bola elementlarni bir necha qatorga joylashtirish uchun xususiyatni qo'shing - flex-wrap: wrap.

Va faqat mulk tekislash-tarkib CSS bloklari qanday joylashishi va hizalanishi kerakligini belgilaydi. Parametr cho'zish bloklarni konteynerda teng ravishda joylashtirish imkonini beradi. Shu bilan birga, ularning balandligi avtomatik ravishda tanlanishi mumkin. Bu nimaga o'xshaydi? Keling, ichki bloklar uchun CSS qo'shamiz.

Konteyner div (
kengligi: 50px;
fon: yashil;
chekka: 5px;
}

Biz balandlikni ataylab belgilamaymiz. HTML kodi quyidagicha ko'rinadi:

Kodning natijasi rasmda ko'rsatilgan.

Agar siz bloklarning balandligini ham belgilasangiz nima bo'ladi:

Konteyner div (
kengligi: 50px;
balandligi: 50px;
fon: yashil;
chekka: 5px;
}

Endi balandlikni olib tashlaymiz va bloklarning kengligini 100% ga teng qilamiz.

Konteyner div (
kengligi: 100%;
fon: yashil;
chekka: 5px;
}

Biz tushunamiz.

Yana bir parametr tekislash-tarkib hisoblanadi markaz va barcha bloklarni markazda tekislash imkonini beradi.

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content:markaz;
}
.container div(
kengligi: 50px;
balandligi: 50px;
fon: yashil;
chekka: 5px;
}

Natija:

Boshqa variant moslashuvchan uchi xususiyatlari tekislash-tarkib bloklarni idishning pastki qismiga joylashtirish imkonini beradi.

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content:flex-end;
}

Parametr moslashuvchan boshlash hamma narsani aksincha qiladi.

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content: flex-start;
}

Boshqa xususiyat parametri tekislash-tarkib, uning natijalari egiluvchan konteynerdan foydalanmasdan yaratish oson bo'lmaydi - bu bo'sh joy - orasidagi. Xususiyat birinchi qatorni yuqoriga, ikkinchisini esa pastga qo'yib, ular orasida bo'sh joy yaratadi.

CSS kodining bir qismi:

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content:bo'sh joy;
}

Natija:

Mulk bo'sh joy - atrofida tepada va pastda bo'sh joy qo'shadi. Bundan tashqari, ularning har biri markazdagi bo'sh joyning yarmiga teng.

Idish (
kengligi: 450px;
balandligi: 250px;
chegara: 1px qattiq #000000;
displey: moslashuvchan;
flex-o'rash: o'rash;
align-content:atrofdagi bo'sh joy;
}

Shunday qilib, CSS xususiyati tekislash-tarkib ko'p parametrlarga ega: cho‘zish, egilish-boshlash, egiluvchan-oxir, markaz, bo‘shliq-oraliq, bo‘shliq-atrof.

Yuqoridagi misollardan ko'rinib turibdiki, CSS align-content xususiyatining bir parametrini o'zgartirib, biz flex texnologiyasidan foydalangan holda CSS bloklarini tekislashdan butunlay boshqacha usullarda foydalanamiz. Ushbu kod Internet Explorer-da 10-versiyagacha ishlamaydi.

Ushbu maqolada biz moslashuvchan veb-sahifa maketlarini yaratish uchun mo'ljallangan CSS Flexbox texnologiyasini tanishtiramiz.

CSS Flexbox maqsadi

CSS Flexbox uchun moslashuvchan sxemalarni yaratish. Ushbu texnologiyadan foydalanib, siz konteynerdagi elementlarni juda sodda va moslashuvchan tarzda tartibga solishingiz, ular orasidagi mavjud bo'shliqni taqsimlashingiz va ma'lum o'lchamlarga ega bo'lmasa ham, ularni u yoki bu tarzda tekislashingiz mumkin.

CSS Flexbox Float va joylashishni aniqlashdan ko'ra sezgir dizaynlarni yaratishni ancha osonlashtiradi.

Flexbox ham butun sahifani, ham uning alohida bloklarini CSS belgilash uchun ishlatilishi mumkin.

CSS Flexbox uchun brauzerni qo'llab-quvvatlash

CSS Flexbox hozirda foydalanilayotgan barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi (prefikslar yordamida: 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 asoslari

Flexbox yordamida CSS belgilarini yaratish kerakli HTML elementining CSS ko'rsatish xususiyatini flex yoki flex-inline ga o'rnatishdan boshlanadi.

Shundan so'ng, bu element egiluvchan konteynerga aylanadi va uning hammasi bevosita bola elementlari moslashuvchan elementlardir. Bundan tashqari, biz flexbox haqida gapirganda, biz faqat display: flex yoki display: flex-inline va barcha elementlarga ega elementni nazarda tutamiz. bevosita unda joylashgan. Shunday qilib, CSS Flexbox-da faqat ikkita turdagi elementlar mavjud: moslashuvchan konteyner va moslashuvchan element.

Ko'pgina brauzerlarda tartibni qo'llab-quvvatlash uchun CSS-ga prefiks va maksimal kenglik xususiyatlari qo'shilgan.

Blokni moslashuvchan konteynerga "aylantirish" uchun qator sinfidan foydalaning. Egiluvchan konteyner ichidagi .col__article va .col__aside moslashuvchan elementlarning kengligini o'rnatish flex CSS xususiyati yordamida amalga oshiriladi.

Misol tariqasida, flexbox-dan foydalanib, yana bir altbilgini belgilaymiz va .col__article elementida uchta elementdan iborat blok yaratamiz (bitta elementning minimal kengligi 300px). Biz to'rtta blokni pastki qismga joylashtiramiz (bitta blokning minimal kengligi 200px).

Order xususiyati egiluvchan konteyner ichida pastki elementlarning paydo bo'lish tartibini boshqaradi. Odatiy bo'lib, ular dastlab moslashuvchan konteynerga qo'shilgan tartibda joylashtirilgan.

Qiymatlar

.flex-element (buyurtma:<целое число>; }

Flex elementlarini HTML kodini o'zgartirmasdan ushbu oddiy xususiyatdan foydalanib qayta tartiblash mumkin.

Standart qiymat: 0.

egiluvchan o'sadi

Bu xususiyat o'sish omilini belgilaydi, bu musbat bo'sh joy ajratilganda egiluvchan element egiluvchan konteynerdagi boshqa moslashuvchan elementlarga nisbatan qanchalik o'sishini belgilaydi.

Qiymatlar

.flex-element (flex-grow:<число>; }

Agar barcha moslashuvchan elementlar bir xil moslashuvchan o'sish qiymatiga ega bo'lsa, unda barcha elementlar konteynerda bir xil o'lchamga ega bo'ladi.

Ikkinchi moslashuvchan element boshqa moslashuvchan elementlarning o'lchamiga nisbatan ko'proq joy egallaydi.

Standart qiymat: 0.

egiluvchan qisqarish

flex-shrink manfiy bo'sh joyni taqsimlashda egiluvchan element egiluvchan konteynerdagi boshqa moslashuvchan elementlarga nisbatan qanchalik qisqarishini aniqlaydigan qisqarish omilini belgilaydi.

Qiymatlar

.flex-element ( flex-shrink:<число>; }

Odatiy bo'lib, barcha egiluvchan elementlarni qisqartirish mumkin, ammo agar biz flex-shrink qiymatini nolga qo'ysak (qisqarish yo'q), u holda elementlar asl hajmini saqlab qoladi.

Standart qiymat: 1.

Salbiy raqamlarga ruxsat berilmaydi.

moslashuvchan asos

Bu xususiyat kenglik va balandlik xususiyatlari bilan bir xil qiymatlarni oladi va bo'sh joy nisbatlarga ko'ra ajratilishidan oldin moslashuvchan elementning boshlang'ich asosiy hajmini belgilaydi.

Qiymatlar

.flex-element ( moslashuvchan asos: avtomatik |<ширина>; }

flex-basis to'rtinchi moslashuvchan element uchun ko'rsatilgan va uning boshlang'ich hajmini belgilaydi.

Standart qiymat:avto.

moslashuvchan

Bu xususiyat flex-grow, flex-shrink va flex-basis xususiyatlarining qisqartmasi hisoblanadi. Boshqa qiymatlar qatorida siz avtomatik (1 1 avtomatik) va hech birini (0 0 avtomatik) o'rnatishingiz mumkin.

Qiymatlar

.flex-element (flex: yo'q | avtomatik | [ ? || ]; }

Standart qiymat: 0 1 avtomatik.

W3C individual xususiyatlar o'rniga flex stenografiya xususiyatidan foydalanishni tavsiya qiladi, chunki flex odatdagi foydalanish uchun har qanday aniqlanmagan komponentlarni to'g'ri o'rnatadi.

o'z-o'zini tekislash

Align-self xususiyati individual moslashuvchan elementlar uchun standart hizalanishni (yoki align-items orqali belgilangan qiymatni) bekor qilish imkonini beradi. Mavjud qiymatlarni tushunish uchun moslashuvchan konteyner uchun align-elementlar tavsifiga qarang.

Qiymatlar

.flex-element (align-self: auto | flex-start | flex-end | markaz | asosiy chiziq | cho‘zish; )

Uchinchi va to'rtinchi egiluvchan elementlar uchun hizalanish align-self xususiyati orqali qayta aniqlandi.