Moslashuvchan CSS misollar yordamida murakkab sxemalar. Flexbox sizni ishga solishi uchun bir qancha foydali misollar

Ushbu maqolada biz sizga CSS -ni joylashtirishning asosiy muammolarini hal qilishning 5 texnikasini o'rganamiz. Biz, shuningdek, ushbu metodlardan qanday foydalanish mumkinligini aniq ko'rsatadigan, real loyihalardan amaliy misollar qo'shdik.

Ustunlarni balandligi teng qilish

Bu birinchi qarashda juda oddiy ko'rinishi mumkin, lekin ba'zida bu vazifa zerikarli bo'lishi mumkin. Min-balandlikdan foydalanish ishlamaydi, chunki ba'zi kontent paydo bo'lganda ustunlar darhol o'lchamlarini o'zgartira boshlaydi.

Flexbox bilan bu muammoni hal qilish ham yechim emas, chunki flexbox CSS bilan yaratilgan ustunlar dastlab teng uzunlikka ega bo'ladi. Biz faqat "suyuq" modelni joriy qilishimiz kerak, so'ngra egiluvchan yo'nalish va tekislash elementlarining xususiyatlari to'g'ri o'rnatilganligiga ishonch hosil qilishimiz kerak.

.container (display: flex; / * Flex modelini ishga tushirish * / / * Bu standart qiymatlar, lekin siz ularni o'zgartirishingiz mumkin * / flex-direction: row; narsalar: cho'zish; / * Idish ichidagi buyumlar to'liq balandlikka cho'ziladi * /)

Elementlarni qayta tartibga solish

O'tmishda, ba'zi elementlarning tartibini dinamik ravishda o'zgartirish faqat JavaScript -ni bajarishi mumkin bo'lgan vazifa edi. Ammo flexbox -ning paydo bo'lishi bilan, bu muammo endi paydo bo'lmaydi, chunki yechim faqat bitta CSS xususiyatida.

Buyurtma xususiyati, bu bizga flexbox sxemasidan foydalanishga imkon beradi, bu o'zi uchun gapiradi. Bu bizga "moslashuvchan" elementlarning istalgan sonini va ularning ketma -ketligini o'zgartirish imkonini beradi. Bu xususiyatning yagona parametri butun element bo'lib, bu elementning o'rnini belgilaydi, son qanchalik ko'p bo'lsa - bu elementning ustuvorligi shuncha yuqori bo'ladi.

.konteyner (ko'rsatish: egiluvchan;) / * Kamayib borayotgan raqamlarning ustuvorligi * / .ko'k (tartib: 3;) .qizil (tartib: 2;) .yashil (buyurtma: 1;)

Buyurtma xususiyati ko'p maqsadlarga ega. Agar siz ulardan ba'zilarini ko'rishni xohlasangiz, biz ushbu texnikani ishlatib, javob beradigan sharhlar bo'limini yaratamiz.

Gorizontal va vertikal markazlashtirish

CSS -ni moslashtirish hali ham juda jiddiy muammo. Agar siz qidiruv tizimiga murojaat qilsangiz ham, u sizga ko'plab echimlarni taklif qiladi, ularning aksariyati jadvallar va o'zgarishlardan foydalanishni taklif qiladi, agar biz sezgir tartib haqida gapiradigan bo'lsak, bu umuman mos kelmaydi.

Oddiy echim - bu moslashuvchan quti sxemasi bo'lib, uning yordamida elementlarni koordinata tekisligi bo'ylab harakat qilib, xohlaganingizcha tekislang.

.konteyner (displey: egiluvchan; / * Asosiy o'qda markazlashtirilgan * / justify-content: markaz; / * Kichik o'qda markazlashtirilgan * / align-elementlar: markaz;)

Bu yechimni amalda ko'rish va bu haqda ko'proq ma'lumot olish uchun siz bir xil mavzuga o'tishingiz mumkin.

To'liq javob beradigan tarmoqlarni yarating

Ko'p veb -ustalar sezgir tarmoqlarni yaratish uchun turli CSS kutubxonalari va ramkalariga tayanadi. Bu sohada eng ko'p ishlatiladigan vosita - Bootstrap. Biroq, bu uning yagona turi emas. Yuzlab bunday yordamchilar allaqachon ishlab chiqilgan. Ularning barchasi nisbatan yaxshi ishlaydi va ta'sirchan variantlar bilan faxrlanadi, lekin ular hech qachon bitta muammodan xalos bo'lolmaydilar - bu og'ir. Shuning uchun, agar siz hamma narsani o'z -o'zidan qilishni yaxshi ko'radigan odam bo'lsangiz yoki tarmoq uchun butun tizimni o'rnatishni xohlamasangiz, unda flexbox sxemasi sizga yordam beradi!

Flexbox panjarasidagi qator - bu faqat konteyner. Uning ichidagi gorizontal ustunlar har qanday sonli element bo'lishi mumkin, ularning o'lchami moslashuvchan yordamida o'rnatiladi. Bu model har qanday ekran o'lchamiga moslashadi, shuning uchun ko'pchilik qurilmalarda yakuniy natija yaxshi ko'rinishi kerak. Ammo, agar biz gorizontal tekislikda bo'sh joy etarli emas deb qaror qilsak, unda tartibni ommaviy axborot so'rovi bilan vertikalga aylantirish mumkin.

.container (display: flex;) / * Hajmi har bir ustun uchun sinflar. * / .col-1 (egiluvchanlik: 1;) .col-2 (egiluvchanlik: 2;) @media (maksimal kengligi: 800 piksel) (. konteyner ( / * Gorizontal ob'ektni vertikalga aylantirish. * / flex- yo'nalish: ustun;))

Siz ushbu texnikaning o'zgaruvchanligini ko'rsatmalarda ko'rishingiz mumkin: Yaratishning eng oson yo'li.

Ruxsat etilgan altbilgi yaratish

Flexbox CSS -da bu muammoning oddiy echimi bor. Moslashuvchan elementlar orqali yozilgan docked altbilgisini o'z ichiga olgan sahifani yaratib, siz uning boshqa harakatlanishidan xavotir olmaysiz.

Displeyni qo'llash: tananing tagiga moslashish butun tartibni tuzishda "moslashuvchan rejim" dan foydalanishga imkon beradi. Hamma narsa tayyor bo'lganda, sahifaning asosiy qismi bitta "egiluvchan" elementdan iborat bo'ladi, ikkinchisi esa altbilgi bilan, bu ularning pozitsiyalarini boshqarishni soddalashtiradi.

html (balandlik: 100%;) tanasi (displey: egiluvchanlik; egilish yo'nalishi: ustun; balandlik: 100%;). asosiy (/ * Asosiy bo'lim mavjud bo'lgan hamma narsani to'ldiradi bo'sh joy altbilgi bilan band bo'lmagan sahifada * / flex: 1 0 auto; ) altbilgi ( / * altbilgi kerak bo'ladigan joyni ajratadi va boshqa piksel emas * / flex: 0 0 auto;)

Siz "" maqolasida ushbu texnika haqida ko'proq ma'lumot topasiz.

Xulosa

Hozirgi kunda ko'pchilik brauzerlar moslashuvchan tartib rejimini qo'llab -quvvatlaydilar, demak, flexbox ko'plab ishlab chiquvchilarga yordam berishga tayyor.

Umid qilamanki, siz ushbu maqolani foydali deb topdingiz va CSS ko'nikmalaringizni oshirdingiz. Omad!

CSS flexbox (Moslashuvchan quti tartibi moduli)- moslashuvchan konteynerlar joylashuvi moduli - bu eksa g'oyasiga asoslangan elementlarni tartibga solish usuli.

Flexbox quyidagilardan iborat egiluvchan konteyner va moslashuvchan narsalar... Moslashuvchan elementlar ketma -ket yoki ustunga joylashtirilishi mumkin, qolgan bo'sh joy esa ular o'rtasida turli yo'llar bilan taqsimlanadi.

Flexbox moduli sizga quyidagi vazifalarni bajarishga imkon beradi:

• Elementlarni to'rt yo'nalishdan biriga joylashtiring: chapdan o'ngga, o'ngdan chapga, yuqoridan pastga yoki pastdan yuqoriga.
• Elementlarni ko'rsatish tartibini bekor qiling.
• Avtomatik ravishda elementlarning hajmini bo'sh joyga moslashtirish.
• Gorizontal va vertikal markazlashtirish bilan muammoni hal qiling.
• Idish ichidagi narsalarni to'kib tashlamasdan o'rab oling.
• Bir xil balandlikdagi ustunlar yarating.
• Sahifaning pastki qismiga mahkamlang.

Flexbox ma'lum bir muammoni hal qiladi - bir o'lchovli sxemalarni yaratish, masalan, navigatsiya paneli, chunki egiluvchan elementlarni faqat bitta o'q bo'ylab joylashtirish mumkin.

Modul muammolari va brauzerlararo echimlar ro'yxati uchun Filipp Uoltonning maqolasiga qarang.

Flexbox nima

Brauzerni qo'llab -quvvatlash

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -veb -sayt -
Opera: 12.1 -veb -sayt -
iOS Safari: 7.0 -veb -sayt-
Opera Mini: 8
Android brauzeri: 4.4, 4.1 -webkit-
Android uchun Chrome: 44

1. Asosiy tushunchalar

Guruch. 1. Flexbox modeli

Flexbox modulini tavsiflash uchun ma'lum atamalar to'plami ishlatiladi. Moslashuvchan oqim va yozish rejimi bu atamalarning jismoniy yo'nalishlarga qanday mos kelishini aniqlaydi: yuqori / o'ng / past / chap, o'qlar: vertikal / gorizontal va o'lchamlar: kenglik / balandlik.

Asosiy o'q- egiluvchi elementlar yotqizilgan o'q. U asosiy o'lchamda kengayadi.

Asosiy boshlanish va asosiy tugash- egiluvchan konteynerning boshlang'ich va oxirgi tomonlarini belgilaydigan chiziqlar, ularga nisbatan egiluvchan elementlar qo'yiladi (asosiy boshidan bosh oxirigacha).

Asosiy o'lcham) - egiluvchan konteyner yoki moslashuvchan elementlarning kengligi yoki balandligi, qaysi asosiy o'lchovda bo'lsa, egiluvchan konteyner yoki egiluvchi elementning asosiy hajmini aniqlaydi.

O'zaro o'q- asosiy o'qga perpendikulyar o'q. U yon tomonga cho'ziladi.

Kross boshlanishi va kesishishi- egiluvchi elementlar joylashtirilgan o'zaro faoliyat o'qning bosh va oxirgi tomonlarini belgilaydigan chiziqlar.

O'zaro o'lcham- egiluvchan konteyner yoki egiluvchi buyumlarning kengligi yoki balandligi, qaysi biri ko'ndalang o'lchamda bo'lsa, ularning ko'ndalang o'lchami.

Guruch. 2. Qator va ustunlar rejimi

2. Moslashuvchan konteyner

Moslashuvchan konteyner uning mazmuni uchun formatlashning yangi moslashuvchan kontekstini o'rnatadi. Moslashuvchan konteyner blokli konteyner emas, shuning uchun CSS xususiyatlari, masalan, float, tiniq, vertikal tekislash bola elementlari uchun ishlamaydi. Bundan tashqari, egiluvchan konteynerga matnda ustunlar va :: birinchi qator va :: birinchi harfli soxta elementlar hosil qiluvchi ustun- * xossalari ta'sir qilmaydi.

Flexbox layout modeli, pastki qutilarini o'z ichiga olgan html elementining CSS displeyidagi ma'lum bir qiymatga bog'liq. Ushbu model yordamida elementlarni boshqarish uchun siz displey xususiyatini quyidagicha o'rnatishingiz kerak:

Flex-konteyner ( / * blok-darajali egiluvchan konteyner hosil qiladi * / displey: -webkit-flex; displey: egiluvchanlik). moslashuvchan; ko'rsatish: inline-flex;)

Ushbu xususiyat qiymatlarini o'rnatgandan so'ng, har bir bola avtomatik ravishda egiluvchan elementga aylanadi va bir qatorga (asosiy o'q bo'ylab) joylashadi. Biroq, blokirovka va inline bolalar xuddi shunday yo'l tutishadi, ya'ni. bloklarning kengligi elementning to'ldirilishi va chegaralarini hisobga olgan holda, ularning tarkibining kengligiga teng.

Guruch. 3. Flexbox modelidagi elementlarni tekislash

Agar asosiy blokda o'ralmagan matn yoki rasm bo'lsa, ular anonim moslashuvchan elementlarga aylanadi. Matn konteyner blokining yuqori chetiga tekislanadi va tasvir balandligi blok balandligiga teng bo'ladi, ya'ni. u deformatsiyalanadi.

3. Moslashuvchan elementlar

Moslashuvchan elementlar - bu oqimdagi egiluvchan konteyner tarkibini ifodalovchi bloklar. Moslashuvchan konteyner uning mazmuni uchun yangi formatlash kontekstini o'rnatadi, u quyidagi funktsiyalarni ta'minlaydi:

• Moslashuvchan elementlar uchun ularning ekran xususiyatining qiymati qulflanadi. Ko'rsatish qiymati: ichki blok; va ko'rsatish: jadval katakchasi; displeyda hisoblangan: blok; ...
• Elementlar orasidagi bo'sh joy yo'qoladi: hatto elementlar orasidagi matn anonim egiluvchi elementga o'ralgan bo'lsa ham, u o'zining egiluvchan elementiga aylanmaydi. Anonim moslashuvchan elementning mazmuni o'z -o'zidan tuzilishi mumkin emas, lekin u ularni moslashuvchan konteynerdan (masalan, shrift sozlamalari) meros qilib oladi.
• Mutlaqo joylashtirilgan egiluvchan element moslashuvchan tartibni tuzishda qatnashmaydi.
• Qo'shni egiluvchan elementlarning chegara maydonlari qulab tushmaydi.
• Marj va to'ldirish foizlari o'z ichiga olgan blokning ichki kattaligidan hisoblanadi.
• chegara: avtomatik; mos keladigan o'lchovda qo'shimcha joyni o'zlashtiradigan kengaytiring. Ular qo'shni moslashuvchan elementlarni tekislash yoki kengaytirish uchun ishlatilishi mumkin.
• Avtomatik minimal o'lcham moslashuvchan elementlar odatiy tarzda ularning tarkibining minimal hajmiga, ya'ni min-eniga: avtomatik; ... Konteynerlarni aylantirish uchun avtomatik minimal o'lcham odatda nolga teng.

4. Moslashuvchan elementlarning yo'nalishi va yo'nalishini ko'rsatish

Moslashuvchan konteyner tarkibini istalgan yo'nalishda va istalgan tartibda joylashtirish mumkin (konteyner ichidagi moslashuvchan elementlarni qayta tartibga solish faqat vizual ko'rsatishga ta'sir qiladi).

4.1. Asosiy o'q yo'nalishi: egilish yo'nalishi

Xususiyat moslashuvchan konteynerga xosdir. Asosiy o'qning yo'nalishini boshqaradi, uning bo'ylab egilish elementlari joriy yozish rejimiga muvofiq yig'iladi. Meros qilib olinmagan.

egilish yo'nalishi
Qiymatlar:
qator	Standart - chapdan o'ngga (rtl, o'ngdan chapga). Moslashuvchan elementlar chiziq bo'ylab joylashtirilgan. Asosiy o'qning asosiy boshlanish va asosiy yo'nalish yo'nalishlari chiziqli o'qning inline-start va inline-endiga to'g'ri keladi.
qator teskari	O'ngdan chapga yo'nalish (rtl -dan chapdan o'ngga). Moslashuvchan buyumlar konteynerning o'ng chetiga nisbatan chiziqda joylashtirilgan (rtl - chapda).
ustun	Yuqoridan pastgacha yo'nalish. Moslashuvchan elementlar ustunga joylashtirilgan.
ustun-teskari	Elementlar teskari tartibda, pastdan yuqoriga.
boshlang'ich
meros qilib olmoq

Guruch. 4. Chapdan o'ngga tillar uchun egiluvchan yo'nalish xususiyati

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-flex-yo'nalish: qator-teskari; ko'rsatish: egilish; egil-yo'nalish: qator-teskari;)

4.2. Moslashuvchan konteynerning ko'p chizig'ini boshqarish: egiluvchan o'rash

Xususiyat egiluvchan konteyner bir qatorli yoki ko'p chiziqli bo'lishini aniqlaydi, shuningdek, egiluvchan konteynerning yangi chiziqlari biriktiriladigan yo'nalishni belgilaydigan o'zaro o'qlar yo'nalishini belgilaydi.

Odatiy bo'lib, moslashuvchan elementlar bitta o'qda, asosiy o'q bo'ylab yig'iladi. Agar ular to'lib toshsa, ular egiluvchan konteynerning chegara qutisidan tashqariga chiqib ketadi. Mulk meros qilib olinmaydi.

Guruch. 5. LTR tillari uchun Flex-Wrap xususiyati bilan bir nechta satrlarni boshqarish

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-flex-wrap: wrap; displey: flex; flex-wrap: wrap;)

4.3. Yo'nalish va ko'p chiziqli stenografiya: egiluvchan oqim

Xususiyat sizga asosiy va ko'ndalang o'qlarning yo'nalishlarini, shuningdek, agar kerak bo'lsa, egiluvchan elementlarni bir nechta chiziqlar bo'ylab o'rash qobiliyatini aniqlash imkonini beradi. Bu egiluvchan yo'nalish va egiluvchan o'rash xususiyatlarining stenografiyasi. Standart egiluvchan oqim: qator hoziroq; ... mulk meros qilib olinmagan.

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-flex-flow: qatorni o'rash; displey: egiluvchanlik; egiluvchan oqim: qator o'rash;)

4.4. Moslashuvchan elementlarning tartibini ko'rsatish: buyurtma

Xususiyat egiluvchan elementlarning ko'rsatilishi va moslashuvchan konteyner ichida joylashish tartibini belgilaydi. Moslashuvchan elementlarga qo'llaniladi. Mulk meros qilib olinmaydi.

Dastlab, barcha moslashuvchan elementlar tartibga ega: 0; ... Agar siz element uchun -1 oralig'idagi qiymatni belgilasangiz, u vaqt jadvalining boshiga va oxirigacha 1 qiymatiga o'tadi. Agar bir nechta moslashuvchan elementlar bir xil buyurtma qiymatiga ega bo'lsa, ular asl tartibiga ko'ra ko'rsatiladi.

Sintaksis

Flex-konteyner (displey: -webkit-flex; displey: flex;) .flex-element (-webkit-order: 1; buyurtma: 1;)
Guruch. 6. Moslashuvchan elementlarning tartibini ko'rsatish

5. Moslashuvchan elementlarning egiluvchanligi

Moslashuvchan tartibni belgilovchi jihati - bu asosiy o'lchamdagi bo'sh joyni to'ldirish uchun egiluvchan elementlarni kengligi / balandligini o'zgartirib (kattaligiga qarab). Bu moslashuvchan xususiyat yordamida amalga oshiriladi. Moslashuvchan konteyner idishni to'ldirish uchun o'z bolalari o'rtasida bo'sh joy ajratadi (ularning egilish-o'sish nisbatiga mutanosib) yoki toshib ketishining oldini olish uchun ularni qisqartiradi (egiluvchanlik-qisqarish nisbatiga mutanosib).

Agar egiluvchanlik va egiluvchanlik qiymatlari nolga teng bo'lsa, egiluvchan element umuman egiluvchan bo'ladi.

5.1. Bir xususiyat bilan moslashuvchan o'lcham: egiluvchanlik

Bu egiluvchanlik, egiluvchanlik va egiluvchanlik xususiyatlarining qisqartmasi. Standart qiymat: flex: 0 1 auto; ... 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 tezligi: egilish-o'sish

Ijobiy bo'sh joy ajratilganda, egiluvchan konteynerdagi boshqa egiluvchan elementlarga nisbatan qancha egiluvchan element o'sishini nazorat qiladi. Agar ketma-ket egiluvchan elementlarning egiluvchan 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 panelidagi bo'sh joyni boshqarish

Sintaksis

Flex-konteyner (displey: -webkit-flex; displey: egiluvchanlik).

5.3. Qisqartirish nisbati: egilish-qisqarish

Xususiyat salbiy bo'sh joy ajratishda egiluvchan element boshqa egiluvchi elementlarga nisbatan qanchalik qisqarishini ko'rsatadi. Moslashuvchan tayanch o'lchamlari bilan ko'paytiriladi. Salbiy bo'shliq element qanchalik qisqarishi mumkinligiga mutanosib ravishda ajratiladi, shuning uchun, masalan, kichik egiluvchan element kattaroq egiluvchan element ko'rinmas darajada kamaymaguncha nolga kamaymaydi. Mulk meros qilib olinmaydi.

Guruch. 8. Moslashuvchan elementlarni ketma -ket toraytirish

Sintaksis

Flex-konteyner (displey: -webkit-flex; displey: flex;). Flex-element (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. Baza o'lchami: egiluvchan asos

Moslashuvchanlik koeffitsientlari bo'yicha bo'sh joy ajratilmasdan oldin, egiluvchan elementning boshlang'ich asosiy o'lchamini belgilaydi. Avtomatik va kontentdan tashqari barcha qiymatlar uchun asosiy egiluvchanlik o'lchami gorizontal yozish rejimlarida kenglik bilan bir xil tarzda aniqlanadi. Foizlar egiluvchan konteynerning kattaligiga bog'liq va agar hech qanday o'lcham ko'rsatilmagan bo'lsa, egiluvchan asos uchun ishlatiladigan qiymat uning mazmuni kattaligidir. Meros qilib olinmagan.

Sintaksis

Flex-konteyner (displey: -webkit-flex; displey: egiluvchanlik).

6. Hizalama

6.1. Asosiy o'qni tekislash: tarkibni oqlash

Xususiyat egiluvchan elementlarni egiluvchi konteynerning asosiy o'qiga moslashtiradi va egiluvchi elementlar bo'sh joyni taqsimlaydi. Element egiluvchan konteynerga aylantirilganda, moslashuvchan elementlar sukut bo'yicha guruhlanadi (agar ular uchun chegaralar o'rnatilmagan bo'lsa). Marj va egiluvchan o'sish qiymatlari hisoblanganidan keyin interval qo'shiladi. Agar biror narsada nolga teng bo'lmagan egiluvchanlik yoki chegara bo'lsa: auto; , mulk hech qanday ta'sir ko'rsatmaydi. Mulk meros qilib olinmaydi.

Qiymatlar:
moslashuvchan boshlash	Standart qiymat. Moslashuvchan buyumlar egiluvchan idishning boshlang'ich chizig'idan uzoqda joylashgan.
egilish	Moslashuvchan buyumlar egiluvchan idishning so'nggi chizig'idan uzoqda joylashgan.
markaz	Moslashuvchan buyumlar egiluvchan idishning markaziga tekislanadi.
oraliq	Moslashuvchan buyumlar chiziq bo'ylab teng taqsimlanadi. Birinchi egilish elementi boshlang'ich chizig'ining chetiga to'g'ri joylashtirilgan, oxirgi egiluvchan element oxirgi chiziqning chetiga to'g'ri keladi va chiziqdagi qolgan egiluvchan elementlar bir -biriga qo'shni ikkita element orasidagi bo'shliq bilan bo'shliqda joylashtirilgan. bir xil. Agar qolgan bo'sh joy manfiy bo'lsa yoki har bir satrda faqat bitta egiluvchi element bo'lsa, bu qiymat egiluvchan ishga tushirish parametri bilan bir xil bo'ladi.
atrofida	Chiziqdagi egiluvchan elementlar bir -biriga ulashgan har qanday egiluvchan elementlar orasidagi masofa bir xil bo'lishi uchun ajratiladi va birinchi / oxirgi egiluvchi elementlar va egiluvchan idishning qirralari orasidagi masofa egiluvchan elementlar orasidagi masofaning yarmini tashkil qiladi.
boshlang'ich	Xususiyat qiymatini standart qiymatiga o'rnatadi.
meros qilib olmoq	Asosiy elementdan xususiyat qiymatini meros qilib oladi.

Guruch. 9. Justify-Content xususiyatidan foydalanib, elementlarni tekislash va bo'sh joy ajratish

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start;)

6.2. O'zaro o'qlarni tekislash: elementlarni tekislang va o'z-o'zidan tekislang

Moslashuvchan elementlar egiluvchan konteynerning joriy qatorining kesma o'qiga moslashtirilishi mumkin. align-items barcha moslashuvchan konteyner elementlari, shu jumladan anonim moslashuvchan elementlar uchun moslashtirishni o'rnatadi. align-self individual moslashuvchan elementlar uchun bu hizalanishni bekor qilishga imkon beradi. Agar egiluvchan elementning ko'ndalang chekkalari avtomatik bo'lsa, o'z-o'zini tekislash hech qanday ta'sir ko'rsatmaydi.

6.2.1. Elementlarni tekislang

Moslashuvchan elementlarni, shu jumladan anonim egiluvchan elementlarni o'zaro o'q bo'ylab tekislaydi. Meros qilib olinmagan.

Qiymatlar:
moslashuvchan boshlash
egilish
markaz
boshlang'ich	Hizalama bilan shug'ullanadigan barcha moslashuvchan elementlarning asoslari bir xil.
cho'zmoq
boshlang'ich	Xususiyat qiymatini standart qiymatiga o'rnatadi.
meros qilib olmoq	Asosiy elementdan xususiyat qiymatini meros qilib oladi.

Guruch. 10. Idishdagi narsalarni vertikal tekislash

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)

6.2.2. O'z-o'zini tekislash

Mulk bitta egiluvchan elementni egiluvchan idishning balandligiga moslashtirish uchun javobgardir. Hizalama elementlari tomonidan belgilangan hizalanishni bekor qiladi. Meros qilib olinmagan.

Qiymatlar:
avtomatik	Standart qiymat. Moslashuvchan element moslashuvchan konteynerning align-items xususiyatida ko'rsatilgan hizalamadan foydalanadi.
moslashuvchan boshlash	Moslashuvchan elementning yuqori qirrasi egilish chizig'iga (yoki elementning belgilangan chegarasi va chegarasini hisobga olgan holda) kesma o'qning boshi bo'ylab tekis joylashtiriladi.
egilish	Moslashuvchan elementning pastki qirrasi kesma o'qining oxiridan o'tuvchi egiluvchi chiziq bilan (yoki intervalli, elementning chegarasi va chegarasi bilan) bir tekisda joylashtiriladi.
markaz	Moslashuvchan elementning chekkalari egilish chizig'ining kesma o'qida markazlashtirilgan.
boshlang'ich	Moslashuvchan element asosiy chiziqqa moslashtirilgan.
cho'zmoq	Agar egiluvchan elementning o'lchamlari avtomatik bo'lsa va o'zaro chegaralarning hech biri avtomatik bo'lmasa, element uzaytiriladi. Standart qiymat.
boshlang'ich	Xususiyat qiymatini standart qiymatiga o'rnatadi.
meros qilib olmoq	Asosiy elementdan xususiyat qiymatini meros qilib oladi.

Guruch. 11. Shaxsiy egiluvchan elementlarni tekislang

Sintaksis

Flex-konteyner (displey: -webkit-flex; displey: egiluvchanlik).

6.3. Moslashuvchan konteyner qatorlarini tekislash: tarkibni tekislash

Xususiyat oqlash-kontent xususiyatidan foydalanib, asosiy o'qda alohida elementlarni tekislashga o'xshab, o'zaro o'qda qo'shimcha bo'sh joy bo'lganda, qatorlarni egiluvchan konteynerda tekislaydi. Xususiyat bir qatlamli egiluvchan konteynerga ta'sir qilmaydi. Meros qilib olinmagan.

Qiymatlar:
moslashuvchan boshlash	Chiziqlar egiluvchan idishning boshiga to'g'ri biriktirilgan. Birinchi qatorning chekkasi egiluvchan idishning chetiga yaqin joylashtiriladi, har bir keyingi chiziq oldingi qatorga yaqin joylashadi.
egilish	Chiziqlar egiluvchan idishning oxirigacha yig'ilgan. Oxirgi chiziqning chekkasi egiluvchan idishning chetiga yaqin joylashtiriladi, har bir oldingi satr keyingi qatorga yaqin joylashadi.
markaz	Chiziqlar egiluvchan idishning markaziga qarab yig'ilgan. Qatorlar bir -biriga yaqin va egiluvchan konteynerning o'rtasiga egiluvchi konteynerning boshlang'ich qismi bilan birinchi qator o'rtasida, va egiluvchan konteyner tarkibining oxirgi qirrasi bilan oxirgi qatori o'rtasida tenglashtirilgan.
oraliq	Chiziqlar egiluvchan idishda teng ravishda joylashtirilgan. Agar qolgan bo'sh joy manfiy bo'lsa yoki egiluvchan konteynerda faqat bitta egilish chizig'i bo'lsa, bu qiymat egiluvchan start bilan bir xil bo'ladi. Aks holda, birinchi qatorning chekkasi egiluvchan konteyner tarkibining boshlang'ich chetiga yaqin joylashtiriladi va oxirgi chiziqning chekkasi egiluvchan konteyner tarkibining oxirgi chetiga yaqin joylashadi. Qolgan chiziqlar har qanday qo'shni ikkita chiziq orasidagi masofa bir xil bo'lishi uchun taqsimlanadi.
atrofida	Chiziqlar egiluvchan idishda teng ravishda joylashtirilgan, har ikki uchida yarim bo'sh joy bor. Agar qolgan bo'sh joy manfiy bo'lsa, bu qiymat markazning sentiga teng bo'ladi. Aks holda, chiziqlar ikkita qo'shni chiziq orasidagi masofa bir xil bo'lishi uchun ajratiladi va birinchi / oxirgi chiziqlar va egiluvchan konteyner tarkibining qirralari orasidagi masofa chiziqlar orasidagi masofaning yarmini tashkil qiladi.
cho'zmoq	Standart qiymat. Moslashuvchan elementlar qatori teng ravishda cho'zilib, bo'sh joyni to'ldiradi. Agar qolgan bo'sh joy manfiy bo'lsa, bu qiymat egiluvchan start bilan bir xil bo'ladi. Aks holda, bo'sh joy barcha chiziqlar o'rtasida teng taqsimlanadi va ularning lateral hajmini oshiradi.
boshlang'ich	Xususiyat qiymatini standart qiymatiga o'rnatadi.
meros qilib olmoq	Asosiy elementdan xususiyat qiymatini meros qilib oladi.

Guruch. 12. Moslashuvchan elementlarning ko'p qatorli hizalanishi

Sintaksis

Flex-konteyner (displey: -webkit-flex; -webkit-flex-flow: qatorni o'rash; -webkit-align-content: flex-end; displey: egiluvchanlik; egiluvchan-oqim: qatorni o'rash; hizalamoq-tarkib: moslashuvchan-oxiri balandligi: 100 piksel;)

Flexboxlar veb-saytlarning keng qo'llanilishini yaratish uchun juda mos keladi, masalan, "ustun", "ustun" deb nomlangan, hamma ustunlar, tarkibidan qat'i nazar, to'liq balandlikda bo'lishi kerak. Bundan tashqari, ichida manba kodi Asosiy tarkib navigatsiyadan oldin keladi va sahifaning o'zida asosiy tarkib navigatsiyadan keyin keladi.

Shunga o'xshash.

Qopqoq

Flexbox paydo bo'lishidan oldin, bunday maketni hech qanday xakerlarsiz olish juda qiyin edi. Ishlab chiquvchilar ko'pincha kontent hajmi yoki ekran o'lchamidan qat'i nazar, narsalarni to'g'ri joylashtirish uchun qo'shimcha belgilar qo'shish, salbiy chegaralarni qo'llash va boshqa fokuslar qilishlari kerak edi. Ammo, yuqoridagi misoldan ko'rinib turibdiki, flexbox ancha oson.

Bu erda kodning qisqacha mazmuni. Bu misolda, biz #main elementini egiluvchan konteynerga aylantiramiz va sarlavha va altbilgini blok elementlari sifatida qoldiramiz. Boshqacha aytganda, faqat o'rta qismi fleksboksga aylanadi. Mana, uni egiluvchan idishga aylantiradigan parcha.

#main (displey: egilish; min -balandlik: calc (100vh - 40vh);)

Moslashuvchan konteyner yaratish uchun faqat display: flex -dan foydalaning. Shuni ham unutmangki, biz min-balandlikni calc () funktsiyasi bilan o'rnatdik va #main-ni ko'rish balandligining 100% ga o'rnatdik. minus qopqoq va podvalning balandligi (har biri 20 vatt). Bu, tarkib oz bo'lsa ham, tartib ekranning to'liq balandligini egallashini ta'minlaydi. Natijada, agar kontent ekran balandligidan past bo'lsa, pastki qism hech qachon ko'tarilmaydi va bo'sh joy qoldirmaydi.

Minimal balandlikni hisoblash juda oson edi, chunki biz barcha elementlarga "box-sizeing: border-box" ni qo'lladik. Agar shunday qilmagan bo'lsak, biz ayirish uchun to'ldirish qiymatini yig'indiga qo'shishimiz kerak bo'ladi.

Moslashuvchan konteynerni o'rnatgandan so'ng, biz moslashuvchan elementlar bilan shug'ullanamiz.

#main> maqola (flex: 1;) #main> nav, #main> chetga (flex: 0 0 20vw; background: bej;) #main> nav (buyurtma: -1;)

Moslashuvchanlik-egiluvchanlik, egiluvchanlik va egiluvchanlik xususiyatlarining qisqartmasi. Birinchi holda, biz faqat bitta qiymatni yozdik, shuning uchun flex moslashuvchan o'sish xususiyatini o'rnatadi. Ikkinchi holda, biz uchta qiymatni yozdik