Keling, flex ga o'rnatilgan displey xususiyatiga ega bo'lgan flex konteyner uchun xossalarni ko'rib chiqaylik.
Moslashuvchan yo'nalish xususiyati
Flex-direction xususiyati egiluvchan konteynerning asosiy o'qi yo'nalishini boshqarishga imkon beradi. Bu xususiyat konteynerlarga qo'llanilishi uchun mo'ljallangan va quyidagi qiymatlarni oladi:
- qator (standart) - asosiy o'q yo'nalishi LTR tili uchun chapdan o'ngga (yuqoridagi diagrammada bo'lgani kabi) va RTL tili uchun o'ngdan chapga o'tadi.
- satr-teskari - bu erda, aksincha, asosiy o'qning yo'nalishi, agar mahalliy LTR bo'lsa, o'ngdan chapga, agar mahalliy parametr RTL bo'lsa, chapdan o'ngga ishlaydi.
- ustun - asosiy o'qning yo'nalishi yuqoridan pastgacha ishlaydi.
- ustun-teskari - asosiy o'qning yo'nalishi pastdan yuqoriga qarab ishlaydi.
Ushbu qiymatlar quyidagicha ishlaydi:
LTR tili uchun qator yoʻnalishioqlash-kontent xususiyati
Egiluvchan konteynerga uning bolalari asosiy o'q bo'ylab qanday tekislanishini aytishingiz mumkin. Qoida tariqasida, agar moslashuvchan elementlar moslashuvchan bo'lmasa yoki moslashuvchan bo'lsa, lekin ularning maksimal hajmiga etgan bo'lsa, bu ortiqcha bo'sh joyni taqsimlashga yordam beradi.
Justify-content xususiyati moslashuvchan konteynerga qo'llaniladi va quyidagi qiymatlarni oladi:
- flex-start (standart) - moslashuvchan elementlar asosiy o'qning boshiga suriladi.
- flex-end - moslashuvchan elementlar asosiy o'qning oxiriga suriladi.
- markaz - egiluvchan elementlar asosiy o'q bo'ylab markazlashtirilgan.
- bo'sh joy - birinchi moslashuvchan element asosiy o'qning boshida, oxirgi moslashuvchan element oxirida va boshqa barcha moslashuvchan elementlar qolgan bo'shliqda teng ravishda taqsimlanadi.
- bo'sh joy - barcha moslashuvchan elementlar asosiy o'qda teng ravishda taqsimlanadi, bo'sh joy esa ular orasida teng taqsimlanadi.
Ushbu qiymatlarning ishlashi quyida ko'rsatilgan:
align-elementlar xususiyati
Align-elementlar - bu moslashuvchan konteynerga uning bolalarini tekislash uchun qo'llaniladigan yana bir xususiyat. Faqat bu safar hizalanish asosiy o'q bo'ylab emas, balki ko'ndalang bo'ylab sodir bo'ladi. Qiymatlar ro'yxatini ko'rib chiqing:
- cho'zish (standart) - egiluvchan elementlar ko'ndalang o'q bo'ylab cho'ziladi (agar minimal kenglik / maksimal kenglik xususiyatlari ko'rsatilgan bo'lsa, ular hisobga olinadi).
- flex-start - egiluvchan elementlar ko'ndalang o'qning boshiga bosiladi.
- flex-end - egiluvchan elementlar ko'ndalang o'qning oxiriga bosiladi.
- markaz - egiluvchan elementlar o'zaro faoliyat o'qi bo'ylab markazlashtirilgan.
- asosiy chiziq - egiluvchan elementlar asosiy chiziqlari bo'ylab tekislanadi.
Ma'lumotni yaxshiroq tushunish uchun misollar:
flex-wrap xususiyati
Yuqoridagi misollar egiluvchan konteynerning faqat bitta qatori (ustun) yordamida ibtidoiy misollarni ko'rsatdi. Ha, sukut bo'yicha bu shunday: moslashuvchan konteyner faqat bitta qatorni o'z ichiga oladi. Lekin flex-wrap xususiyati tufayli siz moslashuvchan konteynerda ko'p qatorni faollashtirishingiz mumkin. Mulk quyidagi qiymatlarni qabul qiladi:
- nowrap (standart qiymat) - moslashuvchan elementlar chapdan o'ngga (yoki RTL joylashuvi uchun o'ngdan chapga) bir qatorga joylashtiriladi.
- o'rash - egiluvchan elementlar gorizontal ravishda bir necha qatorga joylashtiriladi (agar ular bir qatorga to'g'ri kelmasa). Elementlarning yo'nalishi chapdan o'ngga (yoki RTL uchun o'ngdan chapga).
- o'rash-teskari - ishlash printsipi oldingi xususiyat bilan bir xil bo'lib, yagona farq egiluvchan elementlarning teskari tartibda joylashtirilganligidir.
moslashuvchan oqim xususiyati
Flex-flow xususiyati asosan egiluvchan yo'nalish va flex-wrap xususiyatlarining qisqartmasi hisoblanadi. Asosiy o'qning yo'nalishini bitta chiziqda o'rnatishingiz va egiluvchan konteynerning ko'p chiziqli xususiyatini aniqlashingiz mumkin. Xususiyat bo'sh joy bilan ajratilgan ikkita qiymatni belgilaydi: biri flex-direction uchun, ikkinchisi flex-wrap uchun. Misol:
Flex-flow: ustunni o'rash-teskari;
align-content xususiyati
Bu xususiyat faqat moslashuvchan konteyner ko'p qatorni qo'llab-quvvatlasa ishlaydi. Align-content-dan foydalanib, moslashuvchan elementlarning qatorlari vertikal ravishda qanday tekislanishini belgilashingiz mumkin. Mavjud qiymatlar:
- cho'zish (standart) - egiluvchan elementlarning qatori keyingi qatorga tushgunga qadar vertikal ravishda cho'ziladi (agar minimal kenglik / maksimal kenglik xususiyatlari ko'rsatilgan bo'lsa, ular hisobga olinadi).
- flex-start - moslashuvchan elementlarning qatorlari egiluvchan konteynerning boshiga bosiladi.
- flex-end - egiluvchan elementlarning qatorlari egiluvchan konteynerning uchiga bosiladi.
- markaz - moslashuvchan elementlarning qatorlari egiluvchan konteynerda vertikal ravishda markazlashtirilgan.
- bo'sh joy - egiluvchan elementlarning birinchi qatori egiluvchan konteynerning boshida, egiluvchan elementlarning oxirgi qatori oxirida va boshqa barcha qatorlar qolgan bo'shliqda teng ravishda taqsimlanadi.
- bo'sh joy - egiluvchan elementlarning barcha qatorlari egiluvchan konteynerning vertikal bo'shlig'ida teng ravishda taqsimlanadi, bo'sh joy esa ular orasida teng taqsimlanadi.
Flexbox Layout (Moslashuvchan quti) moduli ko'proq narsani ta'minlashga qaratilgan samarali usul konteynerdagi elementlar orasidagi bo'sh joyni tartibga solish, tekislash va taqsimlash, hatto ularning hajmi oldindan noma'lum va/yoki dinamik bo'lsa ham (shuning uchun "flex" so'zi).
Moslashuvchan joylashtirishning asosiy g'oyasi konteynerga uning elementlarining kengligi/balandligini (va tartibini) o'zgartirish imkoniyatini berishdir. eng yaxshi tarzda mavjud bo'sh joyni to'ldiring (asosan barcha turdagi va o'lchamdagi ekranlarga mos keladi). Flexbox konteyneri bo'sh joyni to'ldirish uchun elementlarni kengaytiradi yoki to'lib ketishining oldini olish uchun ularni qisqartiradi.
Eng muhimi, Flexbox an'anaviy tartiblardan farqli o'laroq, yo'nalish bo'yicha agnostikdir (vertikal joylashtirishga asoslangan qutilar va gorizontal joylashtirishga asoslangan inline elementlar). Ular etarlicha yaxshi ishlayotgan bo'lsa-da, ular katta yoki murakkab ilovalarni qo'llab-quvvatlash uchun moslashuvchanlikka ega emaslar (ayniqsa, yo'nalishni o'zgartirish, o'lchamlarni o'zgartirish, cho'zish, kichraytirish va h.k.).
Eslatma. Flexbox dastur komponentlari va kichik maketlar uchun ko'proq mos keladi, CSS Grid esa kattaroq maketlar uchun mo'ljallangan.
Asoslar va terminologiya
Flexbox yagona xususiyat emas, balki butun modul bo'lganligi sababli, u juda ko'p turli xil narsalarni, jumladan, bir qator xususiyatlarni o'z ichiga oladi. Ulardan ba'zilari o'z konteyneriga ("moslashuvchan konteyner" deb nomlanuvchi asosiy element), boshqalari esa kichik elementlarga ("moslashuvchan elementlar" deb nomlanuvchi) o'rnatilishi uchun mo'ljallangan.
An'anaviy tartib tizimi blok va chiziq yo'nalishlariga asoslangan bo'lsa, Flexbox "egiluvchan oqim yo'nalishlari" ga asoslangan. Iltimos, Flexbox-ning asosiy g'oyasini ochib beruvchi spetsifikatsiyadan ushbu chizmaga qarang.
Asosan elementlar bo'ylab joylashgan bo'ladi asosiy o'q(asosiy boshdan asosiy oxirigacha) yoki ko'ndalang o'q(kross-startdan to xochgacha).
Brauzerni qo'llab-quvvatlash
CSS moslashuvchan quti tartibi moduli
Android uchun Chrome
Blackberry brauzeri 10-versiyadan boshlab yangi sintaksisni qo'llab-quvvatlaydi.
Konteyner uchun xususiyatlar
Elementlar uchun xususiyatlar
Asosiy element uchun xususiyatlar (Flex konteyner)
ko'rsatish
Moslashuvchan konteynerni belgilaydi; satr yoki blok o'tgan qiymatga bog'liq. Uning barcha to'g'ridan-to'g'ri yordamchi elementlari uchun moslashuvchan kontekstni yoqadi.
Konteyner (ekran: flex; /* yoki inline-flex */ )
CSS ustunlari moslashuvchan konteynerga ta'sir qilmasligini unutmang.
moslashuvchan yo'nalish
Asosiy o'qni o'rnatadi, shu bilan konteynerda joylashgan elementlarning yo'nalishini aniqlaydi. Flexbox (ixtiyoriy o'ramidan tashqari) bir tomonlama tartib tushunchasidir. Moslashuvchan elementlarni asosan gorizontal qatorlar yoki vertikal ustunlar sifatida tasavvur qiling.
Konteyner ( egiluvchan yo'nalish: qator | satr-teskari | ustun | ustun-teskari; )
- qator (standart)- ltrda chapdan o'ngga; rtl da o'ngdan chapga;
- qator-teskari- ltrda o'ngdan chapga; rtl da chapdan o'ngga;
- ustun- qator bilan bir xil, faqat yuqoridan pastgacha;
- ustun-teskari- bir xil qator-teskari , faqat pastdan yuqoriga;
egiluvchan o'rash
Odatiy bo'lib, elementlar faqat bitta qatorni to'ldirishga harakat qiladi. Agar kerak bo'lsa, ushbu xatti-harakatni o'zgartirishingiz va elementlarni keyingi qatorga o'tkazishga ruxsat berishingiz mumkin.
Konteyner (flex-o'rash: nowrap | o'rash | o'rash-teskari; )
- nowrap (standart)- barcha moslashuvchan elementlar bitta chiziqda joylashgan bo'ladi;
- o'rash- egiluvchan elementlar yuqoridan pastgacha bir nechta satrlarda joylashgan bo'ladi;
- o'rash-teskari- egiluvchan elementlar pastdan yuqoriga bir nechta satrlarda joylashgan bo'ladi;
asoslash-mazmun
Asosiy o'q bo'ylab tekislashni belgilaydi. Bu barcha qat'iy kenglikdagi va qat'iy bo'lmagan egiluvchan elementlarning maksimal hajmiga etganidan keyin qolgan bo'sh joyni taqsimlashga yordam beradi. Bu, shuningdek, elementlarning chiziqdan oshib ketganda hizalanishi ustidan ba'zi nazoratni ta'minlashga yordam beradi.
Konteyner (oqlash-tarkib: flex-start | flex-end | markaz | bo'sh joy | bo'sh joy atrofida; )
- flex-start (standart)- elementlar satr boshiga bosiladi;
- egiluvchan uchi- elementlar chiziq oxirigacha bosiladi;
- markaz- elementlar chiziq bo'ylab markazda joylashgan;
- bo'sh joy - orasidagi- elementlar chiziqqa bir tekis joylashtiriladi; birinchi element satr boshida, oxirgi element satr oxirida;
- bo'sh joy - atrofida- elementlar yonida teng bo'sh joy bo'lgan chiziqqa teng ravishda joylashtiriladi. Vizual ravishda bo'sh joy teng emasligini unutmang, chunki barcha elementlar ikkala tomonda bir xil bo'sh joyga ega. Birinchi elementning konteyner tomonida bir birlik bo'sh joy bo'ladi, lekin u bilan keyingi element o'rtasida ikkita birlik bo'ladi, chunki keyingi elementning ikkala tomonida ham bitta birlik mavjud.
moslamalar
Bu xususiyat joriy chiziqdagi o'zaro faoliyat o'qi bo'ylab egiluvchan elementlarning harakatini aniqlaydi. Buni deb o'ylab ko'ring, lekin ko'ndalang o'q uchun (asosiy o'qga perpendikulyar).
Konteyner (align-elementlar: flex-start | flex-end | markaz | asosiy chiziq | cho'zish; )
- moslashuvchan boshlash - elementlar ko'ndalang o'qning boshida joylashtiriladi;
- egiluvchan uchi elementlar ko'ndalang o'qning oxiriga joylashtiriladi;
- markaz - elementlar ko'ndalang o'qning markazida joylashgan;
- asosiy chiziq- elementlar asosiy chiziq bo'ylab tekislanadi;
- cho'zish (standart)- butun idishni to'ldirish uchun cho'zing (hali ham min-kenglik / maksimal kenglikni hurmat qiling);
tekislash-tarkib
Eslatma. Bu xususiyat faqat bir qator moslashuvchan elementlar mavjud bo'lganda ta'sir qilmaydi.
Konteyner (align-content: flex-start | flex-end | markaz | bo'shliq
- moslashuvchan boshlash- chiziqlar konteyner boshida joylashgan;
- egiluvchan uchi- chiziqlar idishning oxirida joylashgan;
- markaz- konteynerning o'rtasiga chiziqlar joylashtiriladi;
- bo'sh joy - orasidagi- chiziqlar bir tekis taqsimlanadi, birinchi qator konteyner boshida, oxirgi qator esa oxirida joylashgan;
- bo'sh joy - atrofida- chiziqlar bir tekis taqsimlanadi, ular orasidagi masofa bir xil bo'ladi;
- cho'zish (standart)- qolgan joyni egallash uchun chiziqlar butun kenglik bo'ylab cho'ziladi;
To'liq elementlar uchun xususiyatlar (Flex elementlar)
buyurtma
Odatiy bo'lib, barcha elementlar asl tartibda joylashtirilgan. Biroq order xususiyati elementlarning konteyner ichida joylashish tartibini nazorat qiladi.
Element (buyurtma:
egiluvchan o'sadi
Mulk, agar kerak bo'lsa, elementning hajmini oshirish qobiliyatini belgilaydi. U nisbat sifatida o'lchamsiz qiymatni oladi, bu element konteyner ichida qancha bo'sh joy egallashi kerakligini aniqlaydi.
Agar barcha elementlarning moslashuvchan o'sishi xususiyati 1 ga o'rnatilgan bo'lsa, konteyner ichidagi bo'sh joy barcha elementlar orasida teng taqsimlanadi. Agar elementlardan biri 2 ga o'rnatilgan qiymatga ega bo'lsa, u holda element boshqalarga qaraganda ikki baravar ko'p joy egallaydi (hech bo'lmaganda u harakat qiladi).
Element (egiluvchan o'sish:
Salbiy raqamlarni aniqlab bo'lmaydi.
moslashuvchan asos
Qolgan joyni ajratishdan oldin elementning standart hajmini belgilaydi. Bu uzunlik bo'lishi mumkin (20%, 5rem, va hokazo) yoki kalit so'z. Auto kalit so'zi "mening kenglik yoki balandlik xususiyatiga o'xshash" degan ma'noni anglatadi. Kontent kalit so'zi "o'lcham elementning mazmuniga asoslanadi" degan ma'noni anglatadi - bu kalit so'z hali juda yaxshi qo'llab-quvvatlanmaydi, shuning uchun uni sinab ko'rish qiyin va uning birodarlari nima ekanligini bilish qiyinroq min-content , max-content va fit-content qilish.
Element ( moslashuvchan asos:
Agar 0 ga o'rnatilgan bo'lsa, kontent atrofidagi qo'shimcha joy hisobga olinmaydi. Agar avtomatik rejimga o'rnatilsa, qiymat asosida qo'shimcha joy ajratiladi.
moslashuvchan
Bu , va ning qisqartmasi. Ikkinchi va uchinchi parametrlar (flex-shrink va flex-basis) ixtiyoriydir. Standart qiymat 0 1 auto ga o'rnatiladi.
Element ( moslashuvchan: hech | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
o'z-o'zini tekislash
Bu xususiyat individual moslashuvchan elementlar uchun standart hizalanishni (yoki xususiyatdan foydalangan holda bitta to'plamni) bekor qilish imkonini beradi.
Mavjud qiymatlarni tushunish uchun mulk tushuntirishiga qarang.
Element (align-self: auto | flex-start | flex-end | markaz | asosiy chiziq | cho‘zish; ) .element (align-self: auto | flex-start | flex-end | markaz | asosiy chiziq | cho‘zish; )
Esda tutingki, float, aniq va vertikal tekislash moslashuvchan elementga ta'sir qilmaydi.
Misollar
Deyarli har kuni yuzaga keladigan muammoni hal qiladigan juda oddiy misoldan boshlaylik: mukammal markazlashtirish. Agar siz Flexbox-dan foydalansangiz, bu osonroq bo'lishi mumkin emas.
Ota (ekran: flex; balandlik: 300px; ) .child (kenglik: 100px; balandlik: 100px; chekka: avtomatik; )
Bu qo'shimcha joy egallagan egiluvchan konteynerda marjaning avtomatik o'rnatilishiga bog'liq. Shunday qilib, elementda vertikal chegarani avtomatikga o'rnatish elementni ikkala o'qda ham mukammal markazlashtiradi.
Endi yana bir nechta xususiyatlardan foydalanamiz. 6 ta elementning ro'yxatini ko'rib chiqing, ularning barchasi estetik jihatdan qattiq o'lchamga ega, ammo ular avtomatik bo'lishi mumkin. Biz ularning gorizontal o'q bo'ylab bir tekis taqsimlanishini xohlaymiz, shunda brauzer o'lchamini o'zgartirganda hamma narsa yaxshi bo'ladi (media so'rovlari yo'q!).
Flex-konteyner (ekran: flex; flex-flow: qatorni o'rash; oqlash-kontent: bo'sh joy; )
Tayyor! Qolganlarning hammasi dizayn muammolari. Quyida CodePen-ga misol keltirilgan, u erga borib, nima sodir bo'lishini ko'rish uchun derazalar hajmini o'zgartirishga harakat qiling.
Keling, boshqa narsani sinab ko'raylik. Tasavvur qiling-a, bizda ekranning eng yuqori qismida o'ng tomonga tekislangan navigatsiya bor, lekin biz uni o'rta o'lchamdagi ekranlarda va kichik ekranlarda bitta ustunda joylashtirishni xohlaymiz. Bu oddiyroq bo'lishi mumkin emas.
Navigatsiya (displey: flex; flex-flow: qatorni oʻrash; justify-content: flex-end; ) @media all va (maksimal kenglik: 800px) ( .navigation ( justify-content: space-around; ) ) @media all va (maksimal kenglik: 500px) ( .navigatsiya ( moslashuvchan yoʻnalish: ustun; ) )
Keling, moslashuvchan narsalarimizning moslashuvchanligi bilan o'ynab, yanada yaxshiroq narsa qilishga harakat qilaylik! Ekranning butun kengligini qamrab oluvchi va elementlarning asl tartibiga bog'liq bo'lmagan sarlavha va altbilgiga ega bo'lgan uchta ustunli mobil-birinchi tartib haqida nima deyish mumkin.
Oʻrash (displey: flex; flex-flow: qatorni oʻrash; ) .header, .main, .nav, .side, .footer ( flex: 1 100%; ) @media all va (min-width: 600px) ( .sided) ( flex: 1 auto; ) ) @media all and (min-width: 800px) ( .main ( flex: 2 0px; ) .side-1 (tartib: 1; ) .main (tartib: 2; ) .side- 2 (tartib: 3; ) .footer (tartib: 4; ) )
Tegishli xususiyatlar
Xatolar
Albatta, Flexbox xatolardan xoli emas. Men ko‘rgan eng yaxshi to‘plam Filipp Uolton va Greg Uitvortning Flexbugs to‘plamidir.
CSS flexbox (Moslashuvchan quti tartibi moduli)- konteynerni joylashtirishning moslashuvchan moduli - bu o'q g'oyasiga asoslangan elementlarni joylashtirish usuli.
Flexbox dan iborat moslashuvchan konteyner Va moslashuvchan elementlar. Moslashuvchan elementlar qator yoki ustunga joylashtirilishi mumkin va qolgan bo'sh joy ular orasida turli yo'llar bilan taqsimlanadi.
Flexbox moduli quyidagi vazifalarni hal qilishga imkon beradi:
- Elementlarni to'rtta yo'nalishdan birida joylashtiring: chapdan o'ngga, o'ngdan chapga, yuqoridan pastga yoki pastdan tepaga.
- Elementlarni ko'rsatish tartibini bekor qilish.
- Elementlarni mavjud bo'sh joyga mos keladigan tarzda avtomatik o'lchamda.
- Gorizontal va vertikal markazlashtirish bilan muammoni hal qiling.
- Elementlarni konteyner ichida to'ldirib yubormasdan olib boring.
- Bir xil balandlikdagi ustunlar yarating.
- Sahifaning pastki qismiga bosib yarating.
Flexbox muayyan muammolarni hal qiladi - bir o'lchovli tartiblarni yaratish, masalan, navigatsiya paneli, chunki egiluvchan elementlar faqat o'qlardan biri bo'ylab joylashtirilishi mumkin.
Joriy modul muammolari roʻyxati va ular uchun oʻzaro brauzer yechimlari bilan Filipp Uoltonning maqolasida oʻqishingiz mumkin.
Flexbox nima
Brauzerni qo'llab-quvvatlash
IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chrome: 29.0, 21.0 -veb-kit-
Safari: 6.1 -veb-kit-
Opera: 12.1 -veb-kit-
iOS Safari: 7.0 -veb-kit-
Opera Mini: 8
Android brauzeri: 4.4, 4.1 -veb-kit-
Android uchun Chrome: 44
1. Asosiy tushunchalar
Guruch. 1. Flexbox modeli Flexbox modulini tavsiflash uchun ma'lum atamalar to'plamidan foydalaniladi. Moslashuvchan oqim qiymati va yozish rejimi ushbu atamalarning jismoniy yo'nalishlarga muvofiqligini aniqlaydi: yuqori / o'ng / pastki / chap, o'qlar: vertikal / gorizontal va o'lchamlar: kenglik / balandlik.
Asosiy o'q— moslashuvchan elementlar yotqizilgan o'q. U asosiy o'lchamga kiradi.
Asosiy boshlanish va asosiy tugatish- egiluvchan elementlarning yotqizilganiga nisbatan (asosiy boshidan bosh oxirigacha) egiluvchan konteynerning boshlang'ich va oxirgi tomonlarini belgilaydigan chiziqlar.
Asosiy o'lcham) - egiluvchan konteyner yoki egiluvchan elementlarning kengligi yoki balandligi, ularning qaysi biri asosiy o'lchamda ekanligiga qarab, egiluvchan konteyner yoki moslashuvchan elementning asosiy hajmini aniqlaydi.
O'zaro o'q- asosiy o'qga perpendikulyar o'q. U ko'ndalang o'lchamda cho'ziladi.
O'zaro boshlash va kesishish- ko'ndalang o'qning boshlang'ich va oxirgi tomonlarini belgilaydigan chiziqlar, ularga nisbatan egiluvchan elementlar yotqiziladi.
Xoch o'lchami- egiluvchan konteyner yoki egiluvchan elementlarning kengligi yoki balandligi, qaysi biri o'zaro faoliyat o'lchamda bo'lsa, ularning ko'ndalang o'lchami hisoblanadi.
Guruch. 2. Qator va ustun rejimi 2. Egiluvchan konteyner
Flex konteyneri o'z mazmuni uchun yangi moslashuvchan formatlash kontekstini o'rnatadi. Moslashuvchan konteyner blokli konteyner emas, shuning uchun float , clear , vertical-align kabi CSS xususiyatlari pastki elementlar uchun ishlamaydi. Bundan tashqari, moslashuvchan konteynerga matnda ustunlar yaratuvchi ustun-* xususiyatlari va psevdo-elementlar ::first-line va::first-letter ta'sir qilmaydi.
Flexbox belgilash modeli asosiy HTML elementining CSS-ni ko'rsatish xususiyatining o'ziga xos qiymati bilan bog'liq bo'lib, unda ichki bloklar mavjud. Ushbu model yordamida elementlarni boshqarish uchun siz displey xususiyatini quyidagicha o'rnatishingiz kerak:
Flex-konteyner ( /*blok darajasidagi moslashuvchan konteyner yaratadi*/ displey: -webkit-flex; displey: flex; ) .flex-konteyner ( /*liniya darajasidagi moslashuvchan konteyner yaratadi*/ displey: -webkit-inline- flex displey: inline-flex)
Ushbu xususiyat qiymatlarini o'rnatgandan so'ng, har bir kichik element avtomatik ravishda bir qatorda (asosiy o'q bo'ylab) joylashgan moslashuvchan elementga aylanadi. Bunday holda, blok va inline bola elementlari bir xil harakat qiladi, ya'ni. Bloklarning kengligi elementning ichki chegaralari va chegaralarini hisobga olgan holda ularning tarkibining kengligiga teng.
Guruch. 3. Flexbox modelidagi elementlarni tekislash Agar asosiy blokda matn yoki o'ramsiz tasvirlar bo'lsa, ular anonim moslashuvchan elementlarga aylanadi. Matn konteyner blokining yuqori chetiga tekislanadi va tasvirning balandligi blokning balandligiga teng bo'ladi, ya'ni. u deformatsiyalangan.
3. Egiluvchan elementlar
Moslashuvchan elementlar oqimdagi moslashuvchan konteyner tarkibini ifodalovchi bloklardir. Flex konteyner o'rnatiladi yangi kontekst uning mazmuni uchun formatlash, bu quyidagi xususiyatlarni belgilaydi:
- Moslashuvchan elementlar uchun ularning displey xususiyati qiymati qulflangan. Ko'rsatish qiymati: inline-block; va displey: jadval-hujayra; displeyda hisoblangan: blok; .
- Elementlar orasidagi oq bo'shliq yo'qoladi: u o'zining moslashuvchan elementiga aylanmaydi, hatto oraliq matn anonim moslashuvchan elementga o'ralgan bo'lsa ham. Anonim moslashuvchan elementning mazmunini uslublash mumkin emas, lekin moslashuvchan konteynerdan uslublarni (shrift parametrlari kabi) meros qilib oladi.
- Mutlaq joylashtirilgan egiluvchan element egiluvchan joylashuv tartibida ishtirok etmaydi.
- Qo'shni egiluvchan elementlarning chekkalari yiqilmaydi.
- Foiz marjasi va to'ldirish qiymatlari ularni o'z ichiga olgan blokning ichki o'lchamidan hisoblanadi.
- chegara: avtomatik; kengaytirish, mos keladigan o'lchamdagi qo'shimcha joyni o'zlashtirish. Ular qo'shni egiluvchan elementlarni tekislash yoki surish uchun ishlatilishi mumkin.
- Moslashuvchan elementlarning standart avtomatik minimal hajmi uning tarkibining minimal hajmi, ya'ni min-kenglik: auto; . Qaytib olinadigan konteynerlar uchun avtomatik minimal o'lcham odatda nolga teng.
4. Flex elementni ko'rsatish tartibi va yo'nalishi
Moslashuvchan konteyner tarkibi har qanday yo'nalishda va har qanday tartibda joylashtirilishi mumkin (konteyner ichidagi moslashuvchan elementlarni qayta joylashtirish faqat vizual tasvirga ta'sir qiladi).
4.1. Asosiy o'q yo'nalishi: egiluvchan yo'nalish
Mulk egiluvchan konteynerga tegishli. Joriy yozish rejimiga mos ravishda egiluvchan elementlar yig'iladigan asosiy o'qning yo'nalishini boshqaradi. Meros bo'lmagan.
| moslashuvchan yo'nalish | |
|---|---|
| Qadriyatlar: | |
| qator | Standart qiymat chapdan o'ngga (rtl da, o'ngdan chapga). Flex elementlari bir qatorda joylashtirilgan. 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 | Yo'nalish o'ngdan chapga (rtlda chapdan o'ngga). Moslashuvchan elementlar konteynerning o'ng chetiga (rtlda - chapda) nisbatan bir chiziqqa yotqizilgan. |
| ustun | Yuqoridan pastgacha yo'nalish. Flex elementlari ustunga joylashtirilgan. |
| ustun-teskari | Elementlar teskari tartibda, pastdan yuqoriga qarab joylashgan ustun. |
| boshlang'ich | |
| meros | |
Guruch. 4. Chapdan o'ngga tillar uchun Flex-direction xususiyati Sintaksis
Flex-konteyner (displey: -webkit-flex; -webkit-flex-yo'nalishi: satr-teskari; displey: moslashuvchan; moslashuvchan yo'nalish: qator-teskari; )
4.2. Ko'p qatorli moslashuvchan konteynerni boshqarish: flex-wrap
Mulk egiluvchan konteynerning bitta chiziqli yoki ko'p chiziqli bo'lishini aniqlaydi, shuningdek, egiluvchan konteynerning yangi chiziqlari yotqizilishi yo'nalishini belgilaydigan o'zaro faoliyat o'qning yo'nalishini belgilaydi.
Odatiy bo'lib, egiluvchan elementlar asosiy o'q bo'ylab bir qatorda joylashgan. Agar ular to'lib toshgan bo'lsa, ular egiluvchan konteynerning chegara qutisidan tashqariga chiqadi. Mulk meros qilib olinmaydi.
Guruch. 5. LTR tillari uchun flex-wrap xususiyatidan foydalangan holda ko'p qatorli boshqaruv Sintaksis
Flex-konteyner (ekran: -webkit-flex; -webkit-flex-wrap: o'rash; displey: flex; flex-wrap: o'rash; )
4.3. Yo'nalish va ko'p chiziqli qisqacha xulosa: flex-flow
Mulk sizga asosiy va ko'ndalang o'qlarning yo'nalishlarini, shuningdek, agar kerak bo'lsa, egiluvchan elementlarni bir nechta chiziqlarga o'tkazish qobiliyatini aniqlash imkonini beradi. Bu egiluvchan yo'nalish va flex-wrap xususiyatlarining qisqartmasi. Standart qiymat flex-flow: row nowrap; . mulk meros qilib olinmaydi.
Sintaksis
Flex-konteyner (ekran: -webkit-flex; -webkit-flex-flow: qatorni o'rash; displey: moslashuvchan; flex-flow: qatorni o'rash; )
4.4. Moslashuvchan elementlarning tartibini ko'rsatish: buyurtma
Xususiyat moslashuvchan elementlarning egiluvchan konteyner ichida ko'rsatilishi va joylashishi tartibini belgilaydi. Egiluvchan elementlarga tegishli. Mulk meros qilib olinmaydi.
Dastlab barcha moslashuvchan elementlarning tartibi bor: 0; . Element uchun -1 qiymatini belgilaganingizda, u vaqt jadvalining boshiga, 1 qiymati esa oxiriga ko'chiriladi. Agar bir nechta moslashuvchan elementlar mavjud bo'lsa bir xil qiymat buyurtma , ular asl tartib bo'yicha ko'rsatiladi.
Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element ( -webkit-order: 1; tartib: 1; ) 
Guruch. 6. Moslashuvchan elementlarni ko'rsatish tartibi
5. Moslashuvchan elementlarning moslashuvchanligi
Moslashuvchan tartibning belgilovchi jihati asosiy o'lchamdagi mavjud bo'sh joyni to'ldirish uchun ularning kengligi/balandligini (asosiy o'qda qaysi o'lchamga bog'liqligiga qarab) o'zgartirib, egiluvchan elementlarni "moslashtirib olish" qobiliyatidir. Bu flex xususiyati yordamida amalga oshiriladi. Egiluvchan konteyner konteynerni to'ldirish uchun o'z bolalari o'rtasida bo'sh joyni taqsimlaydi (ularning moslashuvchan o'sish nisbatiga mutanosib) yoki to'lib ketishining oldini olish uchun ularni qisqartiradi (egiluvchan-qisqarish nisbatiga mutanosib).
Moslashuvchan element, agar uning moslashuvchan o'sishi va egiluvchanligi nolga teng bo'lsa, butunlay "moslashuvchan" bo'ladi va aks holda "moslashuvchan" bo'ladi.
5.1. Bir xususiyat bilan moslashuvchan o'lchamlarni o'rnatish: flex
Mulk flex-grow, flex-shrink va flex-basis xususiyatlarining qisqartmasi hisoblanadi. Standart qiymat: moslashuvchan: 0 1 avtomatik; . Siz bitta yoki uchta xususiyat qiymatini belgilashingiz mumkin. Mulk meros qilib olinmaydi.
Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )
5.2. O'sish omili: moslashuvchan o'sish
Xususiyat musbat bo'sh joyni taqsimlashda egiluvchan konteynerdagi boshqa moslashuvchan elementlarga nisbatan bir moslashuvchan elementning o'sish tezligini aniqlaydi. Agar qatordagi moslashuvchan elementlarning moslashuvchan o'sish qiymatlari yig'indisi 1 dan kam bo'lsa, ular bo'sh joyning 100% dan kamini egallaydi. Mulk meros qilib olinmaydi.
Guruch. 7. Flex-Grow yordamida navigatsiya paneli maydonini boshqaring Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element (-webkit-flex-grow: 3; flex-grow: 3; )
5.3. Siqish nisbati: egiluvchan-shrink
Bu xususiyat manfiy bo'sh joyni taqsimlashda boshqa moslashuvchan elementlarga nisbatan moslashuvchan elementning siqish nisbatini belgilaydi. Moslashuvchan o'lchamga ko'paytiriladi. Salbiy joy elementning qanchalik qisqarishi mumkinligiga mutanosib ravishda ajratiladi, shuning uchun, masalan, kattaroq moslashuvchan element sezilarli darajada qisqarmaguncha, kichik moslashuvchan element nolga qisqarmaydi. Mulk meros qilib olinmaydi.
Guruch. 8. Egiluvchan elementlarni bir qatorda toraytirish Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element (-webkit-flex-shrink: 3; flex-shrink: 3; )
5.4. Asosiy o'lcham: moslashuvchan asos
Xususiyat egiluvchan omillarga ko'ra bo'sh joy ajratishdan oldin moslashuvchan elementning dastlabki asosiy hajmini o'rnatadi. Avtomatik va kontentdan tashqari barcha qiymatlar uchun asosiy moslashuvchan o'lcham gorizontal yozish rejimlarida kenglik bilan bir xil tarzda aniqlanadi. Foiz qiymatlari moslashuvchan konteynerning o'lchamiga nisbatan aniqlanadi va agar o'lcham ko'rsatilmagan bo'lsa, moslashuvchan asos uchun ishlatiladigan qiymat uning tarkibining o'lchamlari hisoblanadi. Meros bo'lmagan.
Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element (-webkit-flex-basis: 100px; flex-basis: 100px; )
6. Tegishlash
6.1. Asosiy o'qni tekislash: asoslash-tarkib
Mulk egiluvchan elementlarni egiluvchan konteynerning asosiy o'qi bo'ylab tekislaydi va egiluvchan elementlar bilan band bo'lmagan bo'sh joyni taqsimlaydi. Element egiluvchan konteynerga aylantirilganda, egiluvchan elementlar sukut bo'yicha birlashtiriladi (agar ular chekkalari o'rnatilmagan bo'lsa). Bo'shliqlar chegara va flex-grow qiymatlarini hisoblagandan so'ng qo'shiladi. Agar biron bir element nolga teng bo'lmagan flex-grow yoki marjaga ega bo'lsa: auto; , mulk hech qanday ta'sir qilmaydi. Mulk meros qilib olinmaydi.
| Qadriyatlar: | |
| moslashuvchan boshlash | Standart qiymat. Flex elementlari egiluvchan konteynerning boshlang'ich chizig'idan boshlanadigan yo'nalishda yotqizilgan. |
| egiluvchan uchi | Egiluvchan elementlar egiluvchan konteynerning oxirgi chizig'idan yo'nalishda yotqizilgan. |
| markaz | Flex elementlari egiluvchan konteynerning o'rtasiga tekislanadi. |
| bo'sh joy - orasidagi | Flex elementlari chiziq bo'ylab teng ravishda taqsimlanadi. Birinchi egiluvchan element boshlang'ich chizig'ining cheti bilan bir xilda, oxirgi egiluvchan element oxirgi chiziqning chetiga teng ravishda joylashtiriladi va chiziqdagi qolgan egiluvchan elementlar har qanday ikkita qo'shni element orasidagi masofa bo'lishi uchun masofada joylashgan. xuddi shu. Qolgan bo'sh joy salbiy bo'lsa yoki har bir satrda faqat bitta moslashuvchan element bo'lsa, bu qiymat flex-start parametri bilan bir xil bo'ladi. |
| bo'sh joy - atrofida | Chiziqdagi moslashuvchan elementlar har qanday ikkita qo'shni egiluvchan elementlar orasidagi masofa bir xil bo'lishi uchun taqsimlanadi va birinchi/oxirgi egiluvchan elementlar va egiluvchan konteynerning chetlari orasidagi masofa egiluvchan elementlar orasidagi masofaning yarmiga teng. |
| boshlang'ich | Xususiyat qiymatini standart qiymatga o'rnatadi. |
| meros | Asosiy elementdan xususiyat qiymatini meros qilib oladi. |
Guruch. 9. justify-content xususiyatidan foydalanib elementlarni tekislash va bo'sh joyni taqsimlash Sintaksis
Flex-konteyner (ekran: -webkit-flex; -webkit-justify-content: flex-start; displey: flex; justify-content: flex-start; )
6.2. Oʻqlarni oʻzaro moslashtirish: elementlarni tekislash va oʻz-oʻzini tekislash
Flex elementlari egiluvchan konteynerning joriy qatorining ko'ndalang o'qi bo'ylab hizalanishi mumkin. align-items barcha moslashuvchan konteyner elementlari, shu jumladan anonim moslashuvchan elementlar uchun hizalanishni o'rnatadi. align-self alohida egiluvchan elementlar uchun ushbu tekislashni bekor qilishga imkon beradi. Agar moslashuvchan elementning o'zaro chegaralaridan birortasi auto ga o'rnatilgan bo'lsa, align-self hech qanday ta'sir qilmaydi.
6.2.1. Elementlarni tekislang
Xususiyat egiluvchan elementlarni, shu jumladan anonim moslashuvchan elementlarni ko'ndalang o'q bo'ylab tekislaydi. Meros bo'lmagan.
| Qadriyatlar: | |
| moslashuvchan boshlash | |
| egiluvchan uchi | |
| markaz | |
| asosiy chiziq | Hizalashda ishtirok etadigan barcha moslashuvchan elementlarning asosiy chiziqlari bir xil. |
| cho'zish | |
| boshlang'ich | Xususiyat qiymatini standart qiymatga o'rnatadi. |
| meros | Asosiy elementdan xususiyat qiymatini meros qilib oladi. |
Guruch. 10. Idishdagi elementlarni vertikal ravishda tekislash Sintaksis
Flex-konteyner (ekran: -webkit-flex; -webkit-align-items: flex-start; displey: flex; align-elementlar: flex-start; )
6.2.2. O'z-o'zini tekislash
Mulk bitta moslashuvchan elementni moslashuvchan konteyner balandligiga moslashtirish uchun javobgardir. align-items tomonidan belgilangan tekislashni bekor qiladi. Meros bo'lmagan.
| Qadriyatlar: | |
| avto | Standart qiymat. Moslashuvchan element moslashuvchan konteynerning align-elementlar xususiyatida ko'rsatilgan tekislashdan foydalanadi. |
| moslashuvchan boshlash | Moslashuvchan elementning yuqori qirrasi ko'ndalang o'qning boshidan o'tuvchi egiluvchan chiziqqa ulashgan (yoki elementning belgilangan chekkalari va chegaralarini hisobga olgan holda masofada) joylashtiriladi. |
| egiluvchan uchi | Moslashuvchan elementning pastki qirrasi ko'ndalang o'qning oxiridan o'tuvchi egiluvchan chiziqqa (yoki elementning belgilangan chekkalari va chegaralarini hisobga olgan holda masofada) ulashgan holda joylashtiriladi. |
| markaz | Moslashuvchan elementning cheti egiluvchan chiziq ichidagi o'zaro faoliyat o'qi bo'ylab markazlashtirilgan. |
| asosiy chiziq | Moslashuvchan element asosiy chiziqqa to'g'ri keladi. |
| cho'zish | Agar moslashuvchan elementning o'lchami avtomatik bo'lsa va uning o'zaro chegara qiymatlaridan hech biri avtomatik bo'lmasa, element cho'ziladi. Standart qiymat. |
| boshlang'ich | Xususiyat qiymatini standart qiymatga o'rnatadi. |
| meros | Asosiy elementdan xususiyat qiymatini meros qilib oladi. |
Guruch. 11. Alohida egiluvchan elementlarni tekislash Sintaksis
Flex-konteyner (displey: -webkit-flex; displey: flex; ) .flex-element ( -webkit-align-self: markaz; align-self: markaz; )
6.3. Moslashuvchan konteynerning chiziqlarini tekislash: align-content
Xususiyat egiluvchan konteynerdagi chiziqlarni tekislaydi, agar ko'ndalang o'qda tekislash kabi qo'shimcha joy mavjud bo'lsa individual elementlar justify-content xususiyatidan foydalangan holda asosiy o'qda. Mulk bir qatorli moslashuvchan konteynerga ta'sir qilmaydi. Meros bo'lmagan.
| Qadriyatlar: | |
| moslashuvchan boshlash | Qatorlar egiluvchan konteynerning boshiga qarab yig'iladi. Birinchi qatorning chekkasi egiluvchan konteynerning chetiga yaqin joylashtiriladi, har bir keyingi chiziq oldingi chiziqqa yaqin joylashgan. |
| egiluvchan uchi | Qatorlar egiluvchan konteynerning oxirigacha yig'iladi. Oxirgi chiziqning chekkasi egiluvchan konteynerning chetiga yaqin joylashtiriladi, har bir oldingi chiziq keyingi qatorga yaqin joylashgan. |
| markaz | Qatorlar egiluvchan konteynerning o'rtasiga to'g'ri keladi. Qatorlar bir-biriga yaqin va egiluvchan konteynerning o'rtasiga hizalanadi, egiluvchan konteyner tarkibining boshlang'ich cheti va birinchi qator o'rtasida va egiluvchan konteyner tarkibining oxirgi qirrasi va oxirgi qator o'rtasida teng masofa bo'ladi. |
| bo'sh joy - orasidagi | Egiluvchan konteynerda qatorlar teng ravishda taqsimlanadi. Qolgan bo'sh joy manfiy bo'lsa yoki moslashuvchan konteynerda faqat bitta moslashuvchan chiziq bo'lsa, bu qiymat flex-start bilan bir xil bo'ladi. Aks holda, birinchi qatorning qirrasi egiluvchan konteyner tarkibining boshlang'ich chetiga yaqin joylashtiriladi va oxirgi qatorning chekkasi egiluvchan konteyner tarkibining oxirgi chetiga yaqin joylashtiriladi. Qolgan chiziqlar har qanday ikkita qo'shni chiziq orasidagi masofa bir xil bo'lishi uchun taqsimlanadi. |
| bo'sh joy - atrofida | Chiziqlar har ikki uchida yarim bo'shliq bilan egiluvchan konteynerda teng ravishda joylashtirilgan. Qolgan bo'sh joy salbiy bo'lsa, bu qiymat markaz markazi bilan bir xil bo'ladi. Aks holda, chiziqlar har qanday ikkita qo'shni chiziq orasidagi masofa bir xil bo'lishi uchun taqsimlanadi va birinchi/oxirgi qatorlar va egiluvchan konteyner tarkibining qirralari orasidagi masofa chiziqlar orasidagi masofaning yarmiga teng bo'ladi. |
| cho'zish | Standart qiymat. Egiluvchan elementlarning qatorlari barcha mavjud bo'sh joyni to'ldirish uchun teng ravishda cho'ziladi. Qolgan bo'sh joy salbiy bo'lsa, bu qiymat flex-start bilan bir xil bo'ladi. Aks holda, bo'sh joy barcha qatorlar orasida teng ravishda bo'linadi va ularning lateral hajmini oshiradi. |
| boshlang'ich | Xususiyat qiymatini standart qiymatga o'rnatadi. |
| meros | Asosiy elementdan xususiyat qiymatini meros qilib oladi. |
Guruch. 12. Egiluvchan elementlarning ko'p qatorli tekislashi Sintaksis
Flex-konteyner (ekran: -webkit-flex; -webkit-flex-flow: qatorni o'rash; -webkit-align-content: flex-end; displey: flex; flex-flow: qatorni o'rash; align-content: flex-end balandligi: 100px)
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 yaratish imkonini beradi sezgir dizayn Float va joylashishni aniqlashdan foydalanish ancha oson.
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). Altbilgida to'rtta blokni joylashtiramiz (bitta blokning minimal kengligi 200px).
CSS3-flexbox da joriy qilingan maxsus texnologiya hisoblanadi oxirgi versiya kaskadli uslublar, bu sizga ota-konteyner ichidagi bloklarning moslashuvchan panjarasini o'rnatish imkonini beradi.
Ushbu tarmoq qanday imkoniyatlarni taqdim etadi:
- asosiy HTML maket ramkasining ustunli tuzilishini boshqarish qobiliyati;
- jadval tartibiga o'xshash HTML teglar joylashuvi yo'nalishini boshqarish;
- tartibga solish tartibini boshqarish;
- va boshqalar.
Css-flexbox texnologiyasining o'zi quyidagi sxema bo'yicha nisbiy gorizontal va vertikal o'qlardagi tayanch bloklariga asoslangan:
Navigatsiya
Bu yerda standart va maxsus prefikslardan foydalangan holda ko'rib chiqilayotgan blok xususiyatini qo'llab-quvvatlaydigan veb-brauzerlar ro'yxati keltirilgan:
IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chromium: 29.0, 21.0 -veb-kit-
Safari: 6.1 -veb-kit-
Opera: 12.1 -veb-kit-
Safari (Mac-da): 7.0 -veb-kit-
Opera Mini: 8
Android brauzeri: 4.4, 4.1 -veb-kit-
Chrome (Android uchun): 44
1.1. ko'rsatish xususiyati: flex
CSS qoidasi flexbox panjarasini yaratish uchun mo'ljallangan bo'lib, u ota-konteyner ichida joylashgan bola html teglaridan qurilgan. Ushbu to'rni o'rnatish uchun siz ko'rsatish qoidasini quyidagicha o'rnatishingiz kerak:
- displey: moslashuvchan; — blokli displey uchun;
- displey: inline-flex; — inline displey uchun.
Shuni ta'kidlash kerakki, brauzerlarning ba'zi versiyalari uchun ushbu qoidani maxsus prefikslar yordamida belgilash kerak (yuqoridagi bandga qarang), shuningdek, ota-onada o'ramsiz yotgan html teglari anonim hisoblanadi:
1.2. Justify-tarkibni gorizontal ravishda tekislang
Qoida asosiy flexbox konteyneridagi bola ob'ektlarini gorizontal ravishda tekislash uchun ishlatiladi. Bu qoida meros qilib olinmagan.
| asoslash-mazmun | |
|---|---|
| Qadriyatlar: | |
| moslashuvchan boshlash | Chap chetiga tekislanadi. Standart qiymat |
| egiluvchan uchi | O'ng chetiga tekislanadi. |
| markaz | O'rtaga tekislanadi. |
| bo'sh joy - orasidagi | Ota-onaning butun kengligi bo'ylab teng o'lchamdagi segmentlarga. Shuni ta'kidlash kerakki, birinchi element chap chetiga bo'shliqlarsiz, lekin to'ldirishni hisobga olgan holda, oxirgisi ham, lekin o'ng chetiga mos keladi. Boshqa hamma blok elementlari bo'shliqning teng segmentlari orqali birinchi va oxirgi o'rtasida joylashtiriladi. |
| bo'sh joy - atrofida | Butun kenglik bo'ylab, shunda har ikki blok o'rtasida bir xil chuqurchaga va uning yarmi qirralarning bo'ylab bo'ladi. |
| boshlang'ich | Standart qiymatni o'rnatish. |
| meros | |
Yozib olish formati
B-podlogka (balandlik: 120px; fon rangi: #ddd; chekka: 0px; toʻldirish: 10px; displey: flex; displey: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex -boshlash;
B-podlogka (oqlash-tarkib: flex-end; )
B-podlogka (oqlash-tarkib: markaz; )
B-podlogka (oqlash-tarkib: bo'sh joy; )
B-podlogka (oqlash-tarkib: bo'sh joy atrofida; )
1.3. Vertikal hizalama-elementlar
Xususiyat asosiy flexbox konteyneridagi pastki ob'ektlarni vertikal ravishda tekislash uchun ishlatiladi. Shuni ta'kidlash kerakki, anonim moslashuvchan elementlar ham ushbu hizalanishga kiradi. Bu qoida meros qilib olinmaydi. Faqat birinchi qatorning bloklari tekislanadi.
| moslamalar | |
|---|---|
| Qadriyatlar: | |
| cho'zish | Flexbox bloklari, agar balandlik aniqlanmagan bo'lsa, asosiy konteynerning butun balandligiga cho'ziladi. Bu boshlang'ich (asosiy) parametrdir. |
| moslashuvchan boshlash | Ichki to'ldirishni hisobga olgan holda, flexbox elementlarini asosiy konteynerning yuqori chetida tekislash uchun mo'ljallangan. |
| egiluvchan uchi | Ichki to'ldirishni hisobga olgan holda, flexbox elementlarini asosiy konteynerning pastki chetida tekislash uchun mo'ljallangan. |
| markaz | Egiluvchan konteyner ichidagi bolalar moslashuvchan bloklarini eng baland blokning markaziy chizig'iga tekislaydi. |
| asosiy chiziq | Ota-ona qutisidagi pastki moslashuvchan qutilarni ushbu qutilardagi matnning markaziy chizig'iga nisbatan tekislaydi. |
| boshlang'ich | |
| meros | CSS tarjimoniga qiymat asosiy tegdan olinishi kerakligini aytish uchun mo'ljallangan. |
Yozib olish formati
B-podlogka (align-elementlar: stretch; -webkit-align-items: stretch; )
Shuni ta'kidlash kerakki, bolalar egiluvchan bloklari idishning butun balandligiga cho'zilishi uchun ular qattiq balandlik to'plamiga ega bo'lmasligi kerak: balandlik: avto; .
B-podlogka (align-elementlar: flex-start; )
B-podlogka (align-elementlar: flex-end; )
B-podlogka (elementlarni tekislash: markaz; )
B-podlogka (elementlarni tekislash: asosiy; )
1.4. Asosiy o'q yo'nalishi egiluvchan yo'nalish
Bir-biridan keyingi egiluvchan bloklarning yo'nalishini (yo'nalishini) o'rnatish uchun ishlatiladi. Belgilangan standartlarga muvofiq, yo'nalish ikki xil bo'lishi mumkin: vertikal (ustunda, sukut bo'yicha?) va gorizontal (qatorda, sukut bo'yicha?).
Yozib olish formati
B-podlogka ( moslashuvchan yo'nalish: qator; -webkit-flex-yo'nalishi: qator; )
B-podlogka ( egiluvchan yo'nalish: qator-teskari; )
B-podlogka ( egiluvchan yo'nalish: ustun; )
B-podlogka ( egiluvchan yo'nalish: ustun-teskari; )
1.5. Flex-wrapning bir nechta qatorlarini joylashtirish
Bir yoki bir nechta satrlarda bolalar egiluvchan bloklarini joylashtirish uchun javobgar.
| egiluvchan o'rash | |
|---|---|
| Qadriyatlar: | |
| hozir rap | Dastlabki holatda barcha asosiy elementlar bir qatorga joylashtiriladi (? yoki? tanlangan matn yo'nalishiga qarab). |
| o'rash | Ushbu parametrni o'rnatayotganda, asosiy elementlarning kengligiga qarab (? yoki ? tanlangan matn yo'nalishiga qarab) bir nechta qatorlarni egallaydi. |
| o'rash-teskari | Ushbu parametrni o'rnatishda, teskari o'zgartirish tartibiga ega bo'lgan holda, pastki elementlar ota-onaning kengligiga qarab bir nechta qatorlarni egallaydi. |
| boshlang'ich | Asl qiymatiga o'rnatiladi. |
| meros | CSS tarjimoniga qiymat asosiy tegdan olinishi kerakligini aytish uchun mo'ljallangan. |
Yozib olish formati
B-podlogka ( flex-wrap: wrap; -webkit-flex-wrap: wrap; )
B-podlogka (flex-o'rash: o'rash-teskari; )
1.6. Bir egiluvchan oqim qoidasi bilan yo'nalish va ko'p qatorli
Ushbu qoida kodni optimallashtirish uchun oldingi ikkita qoidani yanada ixcham yozib olish sifatida ishlatiladi.
Yozib olish formati
B-podlogka ( flex-flow: qatorni o'rash; -webkit-flex-flow: qatorni o'rash; )
1.7. Barcha satrlarda vertikal tekislang align-content
Ushbu CSS qoidasi konteyner ichidagi bolalar moslashuvchan bloklarini vertikal ravishda tekislash uchun ishlatiladi. Ushbu qoida ishlashi uchun ota-konteyner quyidagi sozlamalarga ega bo'lishi kerak: balandlik va moslashuvchan oqim. Merosiy emas.
| tekislash-tarkib | |
|---|---|
| Qadriyatlar: | |
| cho'zish | Elementlarni asosiy konteynerning to'liq balandligiga cho'zish (egiluvchan bloklar qattiq balandlikka ega bo'lmasligi kerak). |
| moslashuvchan boshlash | Yuqorida tekislanadi. |
| egiluvchan uchi | Pastki qismida tekislanadi. |
| markaz | Markazga vertikal ravishda tekislanadi. |
| bo'sh joy - orasidagi | Konteyner ichidagi elementlarni vertikal ravishda shunday tekislaydiki, bloklarning birinchi qatori yuqoriga, oxirgi qator pastga bosiladi va qolganlari orasidagi bo'shliq teng taqsimlanadi. |
| bo'sh joy - atrofida | Boshidagi, oxiridagi va ular orasidagi masofa teng bo'lishi uchun konteyner ichidagi elementlarni vertikal ravishda tekislang. |
| boshlang'ich | Asl qiymatiga o'rnatiladi. |
| meros | CSS tarjimoniga qiymat asosiy tegdan olinishi kerakligini aytish imkoniyati. |
Misol kod
B-podlogka (balandligi: 120px; egiluvchan oqim: qatorni oʻrash; tekislash-tarkib: choʻzish; )
B-podlogka (align-content: flex-start; )
B-podlogka (align-content: flex-end; )
B-podlogka (align-kontent: markaz; )
B-podlogka (tekislash-tarkib: bo'sh joy; )
B-podlogka (kontentni tekislash: bo'sh joy atrofida; )
Asosiy konteynerga qo'llaniladigan qoidalarga qo'shimcha ravishda, flexbox gridda bolalar elementlariga nisbatan qo'llaniladigan bir nechta qoidalar mavjud. Keling, ularni batafsil ko'rib chiqaylik.
2.1. Bloklarni buyurtma qilish tartibi
CSS qoidasi moslashuvchan ota-ona ichida ba'zi bir kichik moslashuvchan elementni buyurtma qilish uchun ishlatiladi. Blokni birinchi bo'lib qo'yish uchun uni 1, eng oxirigacha ko'chirish uchun esa -1 sifatida ko'rsatish kerak. Merosiy emas.
Yozib olish formati
B-div1 ( -webkit-tartib: 1; tartib: 1; )
B-div5 ( -webkit-buyurtma: -1; tartib: -1; )
2.2. Flex-blok asosidagi moslashuvchan asos
CSS qoidasi ota-ona konteyneridagi bola flexbox kengligini tuzatish uchun mo'ljallangan. Ikkita asosiy parametrni ishga tushirish uchun sozlang. Bu meros bo'lib qolgan qoida emas.
Misol kod
B-div3 ( flex-asos: 70px; -webkit-flex-basis: 70px; )
Barcha bloklarga ellik piksel, uchinchisiga esa to'qson piksel asosi beriladi.