Javascript olmadan adaptiv menyu. İnterfeyslər üçün Flexbox: əsas nümunələr HTML5 konteynerinin yaradılması
Hamıya salam! 2018-ci ilin əvvəlində sayta görə İstifadə edə bilərəm, flexbox-da tərtibat, 97,8% brauzerlər tərəfindən dəstəklənir. Bunlar veb sayt tərtibatı üçün yeni texnologiyadan uzaq bunun üçün əla göstəricilərdir. İndi bu rahat layout metodundan istifadə etməmək üçün heç bir səbəb yoxdur. İndi nə edəcəyik?
Bir neçə layout yaratdıqdan sonra CSS flexbox, mən artıq köhnəlmişlərə qayıtmaq istəmirəm sal və hətta layout dizaynerləri arasında belə bir sevimli çərçivəyə Bootstrap. Baxmayaraq ki, Bootstrap Onu silmək üçün hələ tezdir, çünki onun məşhur şəbəkəsindən istifadə edərək, media sorğularından narahat olmaq lazım deyil.
Bu dərsdə biz tipik bir veb sayt başlığı dizayn edəcəyik adaptiv menyu istifadə edərək flexbox CSSüsul.
Başlıq üç məntiqi blokdan ibarətdir:
- Loqo bloku
- Siyahılarda hazırlanmış menyu ilə bloklayın
- Simge və telefon nömrəsi ilə bloklayın
Bu üç blok ümumi xarici blok sarğısına yerləşdiriləcək başlıq, öz daxilində edəcək ekran: flex;üç blok üçün.
Blokun içərisində nav, gəlin yenidən yazaq ekran: flex; menyu maddələri üçün. Beləliklə, ekran ölçüsü azaldıqda, menyu elementləri bir-birinin altında sıralana bilər;
Aydın nümayiş üçün biz hər şeyi edəcəyik HTML sayt başlığı üçün işarələmə.
+380973457685
Şapka üslublardan istifadə etmədən belə görünəcək, belə olmalıdır.
İndi diqqət! İki bloku müəyyən etmək kifayətdir ekran: flex; və başlığın bütün məzmunu xəttə çəkiləcək.
Başlıq(
ekran: flex;
}
Başlıq .menyu ul (
ekran: flex;
}
Bu belə işləyir flexbox.
*{kənar: 0;
doldurma: 0;
}
Bədən (
fon rəngi: #fff;
font-family: "Open Sans", sans serif;
xəttin hündürlüyü: 1,5;
}
Başlıq(
haşiyə: 2px bərk #ccc;
ekran: flex;
bükülmək: bükmək; /*sətir sonu */
əsaslandırmaq-məzmun: boşluq-ara; /* məzmunu kənarlara sıxır */
align-elementlər: mərkəz; /*şaquli mərkəzləşdirilmiş elementləri düzləşdirir */
}
Header.logo (
padding-sol: 30px;
}
Başlıq .menyu ul (
ekran: flex;
siyahı tərzi: heç biri;
}
Başlıq .menyu ul li (
kənar: 20px 10px;
}
Başlıq .menyu ul a (
mətni çevirmək: böyük hərf;
mətn dekorasiyası: heç biri;
şrift çəkisi: qalın;
rəng: #06a327;
}
Telefon (
şrift ölçüsü: 110%;
rəng: #333;
padding-sağ: 40px;
}
Başlığın uyğunlaşması üzərində işləyirik
Saytın uyğunlaşma prosesinin mahiyyəti sayt elementlərinin görünməyəcəyi və ya səliqəsiz görünməyəcəyi nəzarət nöqtələrini tapmaqdır. Brauzeri genişlikdə sıxışdırarkən vəzifəmiz problemi görmək və stil faylına uyğun kodu (media sorğusu) əlavə etməklə həll etməkdir.
Məsələn, 900 piksel ekran enində telefonla blok başlığın sol kənarına sıxılır.
Bu məsələdə biz edəcəyik effektli üfüqi menyu hover üzərində. Gəlin şrift nişanlarını birləşdirək, mix-blend-rejimindən istifadə edərək qat qarışdırma rejimini aktivləşdirək: çoxaldın, :hover psevdo-siniflərindən istifadə edin və desplay:flax ilə tanış olun, hamısı təmiz CSS3-də aparılır.
HTML-də tel kafes menyusu
Arxivi kompüterinizə yükləyin və arxivdən çıxarın. Bu, üç qovluqdan ibarətdir, üslub fayllarının yerləşdiyi css, nişanlar olan şriftlər qovluğu, fon üçün bir şəkil olan img.
Hər şeyi işlədiyiniz inkişaf mühitinizə köçürün. Bütün kodları phpstorm-da yazacam. Bütün qovluqları və faylları ora köçürürəm, index.html-ni açıram və menyu çərçivəsini təsvir etməyə başlayaq.
Bədən etiketini yazırıq
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
İkonanın adı:
- Alış-veriş kartı
- server
- qovluq-açıq
- qəzet-o
CSS üslubu
İşarələməni etdikdən sonra üsluba davam edirik. style.css-i bədəndə açın və fonu və Verdana şriftini təyin edin.
Bədən (fon şəkli: url("../img/escheresque_ste.png"); şrift ailəsi: Verdana; )
Menyu bloku üçün fon qoyuruq və yuxarıdan 100 piksel abzas edirik. və bütün ekranı doldurmaq üçün eni.
Dws-menyu (fon rəngi: ağ; yuxarı kənar: 100px; en: 100%; )
Ul bloklarında biz desplay:flax istifadə edərək siyahıları üfüqi şəkildə sıralayırıq, dolguları çıxarırıq və justify-content:center istifadə edərək elementlərimizi mərkəzləşdiririk.
Ul.dws-ul( ekran: flex; padding: 0; əsaslandırma-məzmun: mərkəz; )
Markeri LI siyahılarından çıxarırıq və hər tərəfdən 10 zirvə ilə girintilər.
Li.dws-li (siyahı üslubu: heç biri; doldurma: 10px; )
Linklərdən alt xəttini çıxarın və mətni 18 pikselə qədər artırın. və onu qara edin.
Li.dws-li a( mətn dekorasiyası: heç biri; şrift ölçüsü: 18px; rəng: #000; )
margin-right:10px istifadə edərək nişanı bir az sağa köçürün.
Li.dws-li a i( kənar-sağ: 10px; )
Hover animasiyası
Əsas dizaynı etdikdən sonra keçək hover animasiyasına.
Üzərinə qoyulduqda elementin adını vurğulayacaq əlavə psevdo elementlər yaradaq.
Sol tərəfi təsvir edək, keçidləri seçin və onlara psevdo-elementi təyin edək li.dws-li a::before , boş məzmun yazın:’’; , 20 şəkil geniş. və hündürlüyü 3 zirvədir. yetər. Rəngi təyin edək və blokun görünməsi üçün mövqe təyin edək: keçidlərə nisbətən; , və onu tamamilə keçidlərə yerləşdirin, ən aşağıya endirin, sol kənarına basın.
Li.dws-li a( ... mövqe: nisbi; ) li.dws-li a::əvvəl( ... mövqe: mütləq; yuxarı: 100%; sol: 0; )
Bu blokun dublikatını çıxarın və ona psevdo-elementdən sonra ::ayin təyin edin. Sol parametri sağa dəyişin , fərqli rəng seçin #ff2117 .
Li.dws-li a::after( məzmun: ""; en: 20px; hündürlük: 3px; fon rəngi: #ff2117; mövqe: mütləq; yuxarı: 100%; sağ: 0; )
Sonra hover animasiyasını edirik. Lini seçin və onlara bir az qaranlıq fon verin.
Li.dws-li: hover( fon rəngi: #e5eae8; )
Bunun üçün hover üzərindəki siyahıları seçin və onlara eni 50% olan psevdoelement əlavə edin və X oxu boyunca soldan sağa çevrilməni təyin edin. Bu ona hərəkət verəcəkdir.
Li.dws-li:hover a:əvvəl( en: 50%; çevirmək: translateX(100%); )
Pseudo-element üçün eyni şeyi təkrarlayacağıq:: sonra, yalnız indi sağdan sola hərəkəti təyin edəcəyik.
Li.dws-li: hover a:after( en: 50%; çevirmək: translateX(-100%); )
Li.dws-li a::before( ... keçid: .5s; mix-qarışdırma rejimi: çoxaltmaq; ) li.dws-li a::after( ... keçid: .5s; mix-qarışdırma rejimi : çoxaltmaq;
Olduqca yaxşı oldu, indi eni sıfıra təyin edək və keçidi gəzdirərkən qırmızı rəng əlavə edək.
Li.dws-li a:hover( rəng: #e62117; )
Li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... top: 90%; ) li.dws-li a::after( ... üst: 90 %;
Əsasən sizə nə istədiyimi göstərdim və olduqca gözəl menyu oldu.
Dərs Denis Gorelov tərəfindən hazırlanmışdır.
Üzən elementlərə və kənarların manipulyasiyasına əsaslanan səhifə tərtibatı günləri demək olar ki, keçmişdə qaldı. CSS tərtibatçılara plan yaratmaq üçün yeni və təkmilləşdirilmiş xüsusiyyətlər verir. Şaquli düzülmə, elementlər arasında vahid məsafələr, düzülmədəki ardıcıllığı dəyişdirmədən elementlərin yerləşdirilməsinin dəyişdirilməsi və "yapışdırılmış altbilgi" kimi digər nümunələr kimi ənənəvi düzülmə işləri Flexbox istifadə edərək asanlıqla həyata keçirilir.
Bu yazıda biz Flexbox-da həyata keçirmək üçün uyğun olan layout modellərinə baxacağıq. Nümunə olaraq, atom dizaynının prinsiplərini həyata keçirən Tracks tətbiqinin interfeysindən istifadə edəcəyik. Mən Flexbox-un lazımlı olduğu vəziyyətlər haqqında danışacağam və onu xüsusi layout nümunələri ilə birləşdirməyin tələlərini qeyd edəcəyəm. Biz sizə problem yaradan nümunələrə baxacağıq, problemlərin həlli üçün geri dönüşlər təklif edəcəyik və bu əmlakdan indi istifadə etməyə başlamaq üçün əlavə taktikalar təklif edəcəyik.
Çevik Atom Komponentləri
Tracks interfeysi Brad Frostun prinsiplərinə əsaslanaraq, hər bir parçaya ayrı-ayrılıqda baxan bir yanaşma tətbiq edir.
Atom dizayn fəlsəfəsi veb dizayn üçün LEGO bloklarının ekvivalenti kimi düşünülə bilər. Orqanizm, molekul, atom kimi elmi terminlər tərtibatçılara interfeys elementlərinin təsnifatını vermək və müvafiq olaraq hər bir fraqmenti bütövün bir hissəsi kimi daha dərindən başa düşmək üçün istifadə olunur. Bu təsnifat üsulu bu nümunələri müəyyən etməyə imkan verir və torlar, rənglər və məsafələr kimi xarici amillərin bu prosesə təsirinin qarşısını alır. Mikro səviyyədən interfeysin qurulması onun əsas mikroelementlərindən daha çox təkrar istifadə etməyə imkan verir.
Şəkil 1: Bu proqram elementləri atom dizaynı prinsiplərinə əsaslanan məlumatları göstərmək üçün istifadə olunur. Hansıların Flexbox istifadə etdiyini təxmin edə bilərsinizmi? (böyük versiya)
Şəkil 2. Flexbox və atom dizaynından istifadə edərək Tracks tətbiqinin əsas interfeysi. (böyük versiya)
İnterfeys dizaynı axın və istifadəçi interfeysinin sənədləri ilə birlikdə InVision-a prototiplər dəsti kimi təqdim edilmişdir. İlkin UI auditi zamanı mən Flexbox-u tətbiq etməyin mənalı olduğu sahələri müəyyən etməyə başladım. Mən də adətən üzən qutularla həyata keçirilən ənənəvi “solda yan panel, sağdakı əsas məzmun” nümunələrindən istifadə edərək, səhifə tərtibatı üçün Flexbox-dan istifadə etmək qərarına gəldim.
Html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target ( display: flex; flex-istication: row; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li (ekran: inline-block; /* Əvəzində float-pozisiyalaşdırılmış layout sistemindən də istifadə edilə bilər */ )
Flexbox dəstəyi mövcud olmadıqda, biz display: inline-block istifadə edəcəyik. Brauzerdə JavaScript deaktiv edildiyi halda, eyni bəyannaməyə biz no-js sinfini əlavə edəcəyik. CSS şəlaləsi hətta Flexbox və ya JavaScript olmayan yerdə və hətta yükləmə problemləri olsa belə işləyəcək. Flexbox float, displey ilə birlikdə mövcud ola bilər: cədvəl və mövqe: nisbi; Flexbox-u dəstəkləyən brauzerlər ondan prioritet olaraq istifadə edirlər, dəstəkləməyən brauzerlər isə ənənəvi CSS layout mexanizmləri ilə məhdudlaşacaqlar.
Həmişə olduğu kimi, texnologiyanın son seçimi layihənin məqsədlərindən, büdcəsindən və analitik məlumatlardan asılı olacaq. Mənim qızıl qaydam hər zaman layihə üçün ən ağıllı variantı seçməkdir.
Xətt nümunələri
Naviqasiya komponentləri Flexbox üçün çox uyğun oldu, yalnız həyata keçirilməsinin asanlığına görə deyil, həm də sərf olunan vaxtın azalmasına görə. Daxili nümunələr tərtibatçıların vaxtını udmaq üçün məşhurdur, lakin Flexbox ilə biz dəqiqələrdən danışırıq. Əgər IE9-dan əvvəlki dövrdə belə şeyləri həyata keçirmisinizsə, bunun nə qədər vacib olduğunu başa düşəcəksiniz.
Şəkil 3: Bu idarəetmə paneli naviqasiyası şaquli mərkəzləşdirilmiş naviqasiya elementləri olan xətt modelindən istifadə edir. (böyük versiya)
İdarəetmə panelinin naviqasiya nümunəsi işarələnməsi keçidləri əhatə edən naviqasiya etiketindən ibarətdir. Bu nümunənin HTML-si budur:
Və müvafiq üslublar:
Nav ( display: flex; align-items: center; /* naviqasiya elementlərini şaquli olaraq mərkəzləşdirin */ ) nav a ( displey: inline-block; /* IE 10-da sifariş xassəsi ilə daxili elementlər üçün tərtibat problemlərinin qarşısını almaq üçün */ ) naviqasiya a (çevik: 1; )
CSS işarələmə kimi minimalist olduğu ortaya çıxdı. Naviqasiya keçidləri üçün müəyyən edilmiş daxili bloka diqqət yetirin. Əgər sifariş xassəsi ilə elementlərin sırasını dəyişmək qərarına gəlsəniz, bu bəyannamə IE10-da gələcək mümkün problemləri həll edir. Biz həmçinin bilirik ki, çevik konteynerin birbaşa nəsillərinə verilən bütün kənarlar və kənarlar belə şeylərdən qaçınmaq üçün IE10-da layout problemlərinə səbəb olur.
Şəkil 4. Mərkəzləşdirilmiş loqolu başlıq naviqasiya nümunəsi tez-tez internetdə tapılır və asanlıqla Flexbox-a uyğunlaşır. (böyük versiya)
Ənənəvi olaraq, daxili naxış adətən qeyri-semantik işarələmə istifadə edərək həyata keçirilir, Flexbox ilə biz belə fəndlər olmadan edə bilərik.
Dizayn loqotipin solunda və sağında mərkəzdə yerləşdirilmiş menyu elementləri toplusundan ibarətdir. Bu nümunə üçün işarələmə aşağıdakı kimidir:
Flexbox HTML hacklərinə ehtiyacı azalda bilər və işarələmədə göstərildiyi kimi semantikanın qorunmasına imkan verir. Semantik dəstək vacibdir, çünki bu HTML-nin gələcəkdə istifadə olunma şansı yüksəkdir; Bunun üçün bu müzakirənin hüdudlarından kənara çıxan bir çox başqa səbəblər var.
Flexbox-dan əvvəl tərtibatçılar daxili tərtibatı təşkil etmək üçün displey: inline-block və hətta float: left yanaşmalarından istifadə edirdilər. Flexbox indi əlverişli bir seçimdir və tərtibatçılar artıq gözəl dizayn naminə pis təcrübələrdən istifadə etməyə məcbur deyillər. Tələb olunan CSS Şəkil 3-dəki əvvəlki nümunə nümunəsi kimi qısa deyil, lakin onu həyata keçirmək köhnə metodlardan daha asandır.
Pipeline-header ( display: flex; align-items: center; justify-content: space-been; ) .pipeline-header > a ( display: inline-block; /* IE 10 sifarişi tanımır, ona görə də biz bunu edirik. orada qəribə layoutların qarşısını almaq üçün */ ) .pipeline-logo ( flex: 1; order: 2; text-align: center; ) .pipeline-nav ( flex: 1.25; order: 1; ) .pipeline-search ( flex: 1; sıra: 3; a (sifariş: 4; )
Şəkil 3-dəki nümunədə flexbox-dan istifadə edərkən, işarələmədəki ardıcıllığın dəyişdirilə biləcəyini unutmayın. Loqonun köçürülməsi lazımdırsa, bu, sifariş mülkiyyətindən istifadə etməklə asanlıqla həyata keçirilir. Nəzərə alın ki, işarələmə qaydası əlçatanlıq üçün vacibdir və bu, Flexbox-a gəldikdə mübahisəlidir, xüsusən də brauzerlər arasında əlçatanlığın müxtəlif tətbiqini nəzərə alsaq. Brauzerlər (Firefox-dan başqa) və ekran oxuyucuları CSS tərəfindən yaradılan vizual qaydadan çox klaviatura naviqasiyası üçün tərtibat sırasından istifadə edirlər.
Şəkil 5: İşarələmədə təmsil olunan və brauzerdə göstərilən axın, işarələməni dəyişdirmədən flexbox istifadə edərək təkrar ardıcıllıqla. (böyük versiya)
Aşağıda belə bir layout üçün kod verilmişdir. İşarələmə elementlərin sırasını dəyişdirmək üçün istifadə edilmir.
Burada CSS-dən Şəkil 5-in sağındakı diaqramdakı elementlərin sırasını dəyişmək üçün istifadə olunur.
Konteyner (ekran: flex; flex-istiqamət: sütunlar; /* sıra standart dəyərdir */ ) başlıq ( order: 2; ) main ( order: 3; ) footer ( order: 1; )
Bu tip tərtibat yalnız naviqasiya üçün deyil, daha çox üçün istifadə olunur. Siz bunu altbilgidə görmüş ola bilərsiniz.
Şəkil 6: Naviqasiya üçün istifadə etdiyimiz eyni model altbilgidə istifadə olunur. (böyük versiya)
Bu nümunəni istifadə edərkən, məzmunun konteynerdə kifayət qədər yer olmaya biləcəyini unutmayın. Məzmun mərkəzdən kənarlara yayılmalıdır? Bu, planın qalan hissəsinə necə təsir edəcək? Layihəyə başlamazdan əvvəl bu suallar üzərində düşünün. Və yadda saxlayın ki, klaviatura naviqasiyası istifadəçilər üçün vacibdir.
Sətir giriş sahələri
Formalar, xüsusən də Photoshop-da hazırlanmış mürəkkəb grid strukturu ilə sıx birləşdirildikdə dizayn kabusu ola bilər. "Daxili etiket" nümunəsi, mənim adlandırdığım kimi, Fender Stratocaster rok musiqisi üçün olduğu kimi sənayemiz üçün də vacibdir.
Şəkil 7: Daxil edilmiş etiketlər və giriş sahələri Flexbox-un istifadə oluna biləcəyi başqa sahədir. Ancaq mətnin miqdarından asılı olaraq etiket mətninin giriş sahəsinə necə geri itələdiyinə diqqət yetirin. (böyük versiya)
Əvvəlki bölmədə qeyd edildiyi kimi, brauzer ölçüsü dəyişdikdə və ya dinamik məzmun olduqda məzmunun konteyner daxilində necə paylanacağına qərar verməlisiniz.
Şəkil 8: Məzmununuzun necə genişlənəcəyinə qərar verin. Solda displey var: ortada şaquli düzülmə ilə masa, sağda mərkəzə düzülən bir çevik qutu. (böyük versiya)
Bu ekran görüntüləri dinamik və ya böyük məzmunlu Flexbox səhvlərini aydın şəkildə göstərir. Düzgün təsvirdəki effekt mənim "mərkəzdən itələmə" adlandırdığım effektdir, yəni yeni məzmun mərkəzdən kənara doğru itələnir.
Şəkil 8-də xətt etiketi nümunəsi üçün işarələmə budur.
Problemin həlli displeydən istifadə etməkdir: cədvəl; uzun mətn üçün. Bu, məzmunun mərkəzdən kənarlara deyil, yuxarıdan aşağıya axmasına imkan verir.
Forma qrupu ( ekran: flex; ) .forma-qrup etiketi ( ekran: cədvəl; şaquli düzən: orta; ) .forma-qrup girişi ( flex: 1; )
Flexbox və displey birləşməsi: masa daha çox araşdırmağa dəyər olan əla texnikadır. Ancaq onu istifadə edərkən, səhvləri vaxtında müəyyən etmək üçün həmişə test mühitində tərtibatı yoxlamaq vacibdir.
Şəkil 9: Eyni sətirdəki giriş sahələrini və düymələri istifadə edərək, hündürlükdə bərabər tutulmaqla dizaynda tarazlıq yaradılır. (böyük versiya)
Bu nümunədən istifadə edərək həyata keçirilən çoxlu axtarış sahələrini görmüşəm. Bu, müxtəlif şablonlarda təkrar istifadə oluna bilən çox çevik bir modeldir. Əlbəttə ki, CSS kontekstə xas xüsusiyyətlərdən istifadə edərək burada çox yönlülük təqdim edə bilər.
Tələb olunan HTML tipikdir və flexbox strukturu üçün div sarğı ehtiva edir.
Və burada üslublar:
Forma qrupu ( ekran: flex; ) .forma qrupu girişi ( flex: 1; )
Açılan menyu
Şəkil 10. Sürətli yerləşdirmə üçün Flexbox imkanlarından istifadə edərək açılan menyu ilə səhifənin bölməsi vurğulanır. (böyük versiya)
Açılan menyu şaquli mərkəzləşdirilmiş daxili elementləri ehtiva edən soldakı sütundan və hər bir elementin öz cərgəsində olan sağdakı elementlərin siyahısından ibarətdir.
Şəkil 11. Əsas interfeys menyusu tərtibat üçün Flexbox-dan istifadə etməklə qurulub. (böyük versiya)
Bu naviqasiya menyusu üçün işarələmə əsas kimi aşağıdakı HTML-dən istifadə edir.
Müvafiq CSS sadə və aydındır, tərtibatçıların bəyəndiyi şəkildə.
Menyu ( display: flex; ) .menu__options ( display: flex; align-items: center; ) .menu__items ( display: flex; flex-istication: column; )
Tələb olunan layout bir neçə sətir kodla həyata keçirilir. Üstəlik, bu kod şəbəkə strukturundan ayrılır və işarələmə semantik mənasını saxlayır. Bu, Flexbox-un mürəkkəb yerləşdirmədən və qarışıq planlardan qaçmaq qabiliyyətinin başqa bir nümunəsidir.
Media obyektləri
Şəkil 12: Media obyekti nümunəsi sabit enli SVG-nin solda və qalan flexbox məzmununun yanında yerləşdirilmiş flexbox-dan istifadə edir. (böyük versiya)
“Media obyekti” kimi tanınan bu universal naxış bir tərəfə şəkil və ya videonu məzmunun qalan hissəsi ilə birlikdə yerləşdirir.
Medi-obj (ekran: flex; align-elementlər: flex-start; ) .media-obj__body ( flex: 1; )
Şəkil 13. Bu, brauzer pəncərəsinin ölçüsünün dəyişdirilməsinin ekstremal halıdır, şəkil maksimum enə, sağ tərəf isə əyilməyə təyin edilib 1. Sabit enli elementləri və çevik elementləri qarışdırarkən diqqətli olun
Flexbox bu nümunə ilə əla işləyir, lakin diqqətli olun, çünki media məzmunu yuxarıda göstərildiyi kimi digər məzmunlarla qarşılıqlı əlaqədə ola bilər. Nümunədə qrafik sahəsinin necə çökdüyünü və mətnin yuxarıdan necə itələndiyini görə bilərsiniz. Bu axmaq bir nümunə kimi görünə bilər, çünki kim brauzerini bu qədər dar edə bilər? Amma vacib olan bu deyil - sadəcə Flexbox-dan istifadə etməzdən əvvəl məzmunun onun mühiti ilə necə əlaqəli olduğunu başa düşməliyik.
Bu nümunənin həlli şəkilləri maksimum genişliyə təyin etməkdir: flexbox daxilindəki media üçün 100% və ya lazım olduqda onları tənzimləmək üçün sabit şəkil eni və media sorğularından istifadə edin.
Flexbox təqvimi
Təqvim ən çox yayılmış vidjetlərdən biridir. Soruşa bilərsiniz ki, niyə masadan istifadə etmirsiniz? Bizim vəziyyətimizdə təqvim sadəcə tarixləri seçmək üçün istifadə olunur, ona görə də mən günlər, aylar və illər üçün düymələrdən istifadə etmək və bu düymələri sıra sərhədləri ilə məhdudlaşdırmaq qərarına gəldim (hər həftə təqvim sırası ayrıca div-ə bükülür). Bu yanaşmadan istifadə işarələmə miqdarını azaltmağa və tərtibat yaratmağı asanlaşdırmağa imkan verir (çox sağ olun
Bir sözlə, Flexbox layout bizə bir vaxtlar çətin olan problemlərə sadə həllər verir. Məsələn, bir elementi şaquli olaraq hizalamaq və ya altbilgini ekranın aşağısına sıxmaq və ya sadəcə bir sıra bir neçə blok daxil etmək lazımdır ki, onlar bütün boş yeri tutsunlar. Bənzər problemlər flex olmadan həll edilə bilər. Ancaq bir qayda olaraq, bu həllər daha çox "dəyənəklər" kimidir - CSS-dən təyinatından başqa məqsədlər üçün istifadə üsulları. Halbuki flexbox ilə bu cür vəzifələr çevik modelin nəzərdə tutulduğu kimi həll edilir.
CSS Flexible Box Layout Module (çevik bloklu layouts üçün CSS modulu), qısaca olaraq flexbox, müxtəlif genişlik və hündürlüklərə uyğunlaşdırılmışlar da daxil olmaqla, müxtəlif HTML dizaynlarını yaratarkən çatışmazlıqları aradan qaldırmaq və tərtibatı məntiqli və sadə etmək üçün yaradılmışdır. . Və məntiqi yanaşma, bir qayda olaraq, nəticənin yoxlanılmadığı gözlənilməz yerlərdə işləyir - məntiq hər şeydir!
Flexbox konteyner daxilində elementlərin müxtəlif parametrlərini zərif şəkildə idarə etməyə imkan verir: istiqamət, sıra, en, hündürlük, boyunca və boyunca düzülmə, boş yerin paylanması, elementlərin uzanması və sıxılması.
Əsas bilik
FlexBox Konteyner və onun elementlərindən (çevik elementlər) ibarətdir.
Flexbox-u işə salmaq üçün istənilən HTML elementi sadəcə olaraq CSS xassəsini təyin etməlidir display:flex; və ya ekran: inline-flex; .
Flex xüsusiyyətini aktivləşdirdikdən sonra konteynerin içərisində iki ox yaradılır: əsas və eninə (perpendikulyar (⊥), çarpaz ox). Bütün yuvalanmış elementlər (birinci səviyyə) əsas ox boyunca düzülür. Varsayılan olaraq, əsas ox üfüqidir və soldan sağa (→), çarpaz ox isə müvafiq olaraq şaquli və yuxarıdan aşağıya yönəldilir (↓).
Əsas və çarpaz oxlar dəyişdirilə bilər, sonra elementlər yuxarıdan aşağıya yerləşdiriləcək (↓) və hündürlüyə uyğun gəlmədikdə, soldan sağa (→) hərəkət edəcəklər - yəni baltalar sadəcə yerləri dəyişdirdilər. . Bu halda, elementlərin düzülməsinin başlanğıcı və sonu dəyişmir - yalnız istiqamətlər (oxlar) dəyişir! Buna görə konteynerin içərisindəki baltaları təsəvvür etmək lazımdır. Bununla belə, düşünməmək lazımdır ki, bəzi “fiziki” baltalar var və onlar nəyəsə təsir edir. Buradakı ox yalnız qabın içərisindəki elementlərin hərəkət istiqamətidir. Məsələn, əgər biz elementlərin əsas oxun mərkəzinə düzülməsini təyin etsək və sonra bu əsas oxun istiqamətini dəyişdirsək, düzülmə dəyişəcək: elementlər üfüqi olaraq ortada idi, lakin şaquli olaraq ortada oldu... Nümunəyə baxın.
Flexbox-un digər mühüm xüsusiyyəti transvers istiqamətdə sıraların olmasıdır. Nə danışdığımızı başa düşmək üçün təsəvvür edək ki, əsas üfüqi ox var, çoxlu elementlər var və onlar konteynerə "sığmır", buna görə də başqa cərgəyə keçirlər. Bunlar. konteyner belə görünür: içərisində iki cərgə olan, hər bir sıra bir neçə elementdən ibarət konteyner. Təqdim edildi? İndi unutmayın ki, biz yalnız elementləri deyil, həm də sətirləri şaquli olaraq düzəldə bilərik! Bunun necə işlədiyi əmlak nümunəsində aydın görünür. Və sxematik olaraq belə görünür:
Layout modelinə təsir edə bilən CSS xassələri: float, aydın, şaquli düzülmə, sütunlar çevik dizaynda işləmir. Burada layout qurmaq üçün fərqli bir model istifadə olunur və bu CSS xüsusiyyətləri sadəcə nəzərə alınmır.
Flexbox CSS xüsusiyyətləri
Flexbox bütün çevik dizaynı idarə etmək üçün müxtəlif CSS qaydalarına malikdir. Bəziləri əsas konteynerə, digərləri isə bu konteynerin elementlərinə tətbiq edilməlidir.
Konteyner üçün
ekran:Element üçün çevik xüsusiyyəti aktivləşdirir. Bu xüsusiyyət elementin özünü və onun daxili elementlərini əhatə edir: yalnız birinci səviyyəli nəsillər təsirlənir - onlar çevik konteynerin elementlərinə çevriləcəklər.
- əyilmək- element bütün enini uzadır və ətraf bloklar arasında tam məkana malikdir. Xəttin kəsilməsi blokun əvvəlində və sonunda baş verir.
- inline-flex- element digər elementlərin ətrafına bükülür. Bu halda onun daxili hissəsi blok elementi kimi, elementin özü isə inline kimi formatlaşdırılır.
flex və inline-flex, ətrafdakı elementlərlə fərqli şəkildə qarşılıqlı əlaqədə olması ilə fərqlənir, buna bənzər display:block və display:inline-block .
çevik istiqamət:Konteynerin əsas oxunun istiqamətini dəyişir. Transvers ox müvafiq olaraq dəyişir.
- sıra (defolt)- elementlərin istiqaməti soldan sağa (→)
- sütun- elementlərin yuxarıdan aşağıya istiqaməti (↓)
- sıra tərs- elementlərin sağdan sola istiqaməti (←)
- sütun tərs- elementlərin aşağıdan yuxarıya istiqaməti ()
Konteynerə uyğun olmayan elementlərin köçürülməsinə nəzarət edir.
- nowrap (defolt)- yuvalanmış elementlər konteynerə yerləşdirilib-yerləşdirilməməsindən asılı olmayaraq bir cərgədə (istiqamət=sətirlə) və ya bir sütunda (istiqamət=sütun ilə) yerləşdirilir.
- bükmək- konteynerə uyğun gəlmirsə, növbəti cərgəyə hərəkət edən elementləri ehtiva edir. Bu, elementlərin eninə ox boyunca hərəkətinə imkan verir.
- sarma-ters- sarma ilə eyni, yalnız köçürmə aşağı deyil, yuxarı (əks istiqamətdə) olacaq.
Həm çevik istiqamət, həm də bükülmə xüsusiyyətlərini birləşdirir. Onlar tez-tez birlikdə istifadə olunur, buna görə də flex-flow xüsusiyyəti daha az kod yazmaq üçün yaradılmışdır.
flex-flow boşluqla ayrılmış bu iki xüsusiyyətin dəyərlərini qəbul edir. Və ya hər hansı əmlak üçün vahid dəyər təyin edə bilərsiniz.
/* yalnız çevik istiqamət */ flex-flow: sıra; flex-flow: sıra-əks; flex-flow: sütun; flex-flow: sütun tərs; /* yalnız flex-wrap */ flex-flow: nowrap; flex-flow: sarma; flex-flow: wrap-reverse; /* hər iki dəyər eyni vaxtda: flex-istiqamət və flex-wrap */ flex-flow: row nowrap; flex-flow: sütun sarğı; flex-flow: sütun-reverse wrap-reverse; əsaslandırma məzmunu:
Elementləri əsas ox boyunca düzləşdirir: əgər istiqamət=sətirdirsə, onda üfüqi, istiqamət=sütundursa, şaquli olaraq.
- flex-start (defolt)- elementlər əvvəldən gedəcək (sonda bir az boşluq qala bilər).
- flex-end- elementlər sonunda düzülür (boşluq əvvəlində qalacaq)
- Mərkəz- mərkəzdə (solda və sağda boşluq qalacaq)
- boşluq - arasında- ən kənar elementlər kənarlara sıxılır (elementlər arasındakı boşluq bərabər paylanır)
- boşluq ətrafında- boş yer elementlər arasında bərabər paylanır (ən kənar elementlər kənarlara basılmır). Konteynerin kənarı ilə xarici elementlər arasındakı boşluq sıranın ortasındakı elementlər arasındakı boşluğun yarısı qədər olacaqdır.
- boşluq - bərabər
Elementləri olan cərgələri eninə ox boyunca düzləşdirir. Yalnız əks ox üçün əsaslandırma məzmunu ilə eynidir.
Qeyd: Ən azı 2 sıra olduqda işləyir, yəni. Cəmi 1 sıra olarsa, heç nə olmayacaq.
Bunlar. əgər flex-direction: row , onda bu xüsusiyyət görünməz sıraları şaquli olaraq hizalayacaq. Burada qeyd etmək vacibdir ki, blokun hündürlüyü sərt şəkildə qurulmalı və cərgələrin hündürlüyündən daha böyük olmalıdır, əks halda cərgələr özləri konteyneri uzatacaq və onların hər hansı bir düzülməsi mənasız olur, çünki bloklar arasında boş yer yoxdur. onları... Amma flex-istiqamət: sütun olduqda, o zaman cərgələr üfüqi istiqamətdə hərəkət edir → və konteynerin eni demək olar ki, həmişə cərgələrin enindən böyük olur və cərgələrin düzülməsi dərhal məna kəsb edir...
- uzanmaq (standart)- cərgəni tam doldurmaq üçün sıralar uzanır
- flex-start- sıralar qabın yuxarı hissəsində qruplaşdırılıb (sonda bir az boşluq qala bilər).
- flex-end- sıralar qabın altında qruplaşdırılıb (əvvəlində yer qalacaq)
- Mərkəz- sıralar qabın mərkəzində qruplaşdırılıb (kənarlarda boşluq olacaq)
- boşluq - arasında- xarici sıralar kənarlara sıxılır (sətirlər arasındakı boşluq bərabər paylanır)
- boşluq ətrafında- boş yer sıralar arasında bərabər paylanır (ən kənar elementlər kənarlara basılmır). Konteynerin kənarı ilə xarici elementlər arasındakı boşluq sıranın ortasındakı elementlər arasındakı boşluğun yarısı qədər olacaqdır.
- boşluq - bərabər- boşluq ətrafında olduğu kimi, yalnız xarici elementlərin qabın kənarlarına olan məsafəsi elementlər arasındakı məsafə ilə eynidir.
Elementləri bir sıra (görünməz sıra) daxilində eninə ox boyunca hizalayır. Bunlar. Sətirlərin özləri align-content vasitəsilə düzülür və bu sıralar (sətirlər) daxilindəki elementlər align-elementlər vasitəsilə və bütün eninə ox boyunca düzülür. Əsas ox boyunca belə bir bölmə yoxdur, satırlar anlayışı yoxdur və elementlər justify-content vasitəsilə düzülür.
- uzanmaq (standart)- xətti tamamilə doldurmaq üçün elementlər uzanır
- flex-start- elementlər cərgənin əvvəlinə sıxılır
- flex-end- elementlər cərgənin sonuna qədər sıxılır
- Mərkəz- elementlər cərgənin mərkəzinə düzülür
- əsas- elementlər mətnin əsas xəttinə uyğunlaşdırılır
Konteyner elementləri üçün
flex-böyümək:Konteynerdə boş yer olduqda elementin böyütmə əmsalını təyin edir. Defolt flex-grow: 0 yəni. elementlərin heç biri böyüməməli və konteynerdəki boş yeri doldurmamalıdır.
Defolt flex-grow: 0
- Bütün elementlər üçün flex-grow:1-i təyin etsəniz, onların hamısı bərabər şəkildə uzanacaq və konteynerdəki bütün boş yerləri dolduracaq.
- Elementlərdən birinə flex-grow:1-i təyin etsəniz, o zaman konteynerdəki bütün boş yerləri dolduracaq və justify-content vasitəsilə hizalamalar artıq işləməyəcək: hizalamaq üçün boş yer yoxdur...
- Flex-grow ilə: 1 . Əgər onlardan birində flex-grow:2 varsa, o, bütün digərlərindən 2 dəfə böyük olacaq
- Əgər çevik konteynerin içindəki bütün çevik qutularda flex-grow:3 varsa, onlar eyni ölçüdə olacaqlar.
- Flex-grow ilə:3 . Onlardan birində flex-grow:12 varsa, o, bütün digərlərindən 4 dəfə böyük olacaq
Bu necə işləyir? Tutaq ki, konteynerin eni 500 pikseldir və hər birinin baza eni 100 piksel olan iki elementdən ibarətdir. Bu o deməkdir ki, konteynerdə 300 pulsuz piksel qalıb. İndi flex-grow-u təyin etsək:2; , və ikinci flex-böyümək: 1; , onda bloklar konteynerin bütün mövcud enini tutacaq və birinci blokun eni 300px, ikincisi isə 200px olacaq. Bu, konteynerdə mövcud 300px boş yerin elementlər arasında 2:1 nisbətində, birinci üçün +200px və ikinci üçün +100px nisbətində paylanması ilə izah olunur.
Qeyd: siz dəyərdə kəsr ədədləri göstərə bilərsiniz, məsələn: 0.5 - flex-grow:0.5
bükülmə:Elementin azaldılması faktorunu təyin edir. Mülk flex-grow-un əksidir və konteynerdə boş yer qalmadıqda elementin necə kiçiləcəyini müəyyən edir. Bunlar. bütün elementlərin ölçülərinin cəmi konteynerin ölçüsündən çox olduqda əmlak işə başlayır.
Defolt flex-shrink:1
Tutaq ki, konteyner eni 600px və hər biri 300px genişlikdə olan iki elementdən ibarətdir - flex-basis:300px; . Bunlar. iki element konteyneri tamamilə doldurur. Birinci elementə flex-shrink verin: 2; , və ikinci flex-shrink: 1; . İndi konteynerin enini 300px azaldaq, yəni. elementlər konteynerin içərisinə sığmaq üçün 300px azalmalıdır. Onlar 2: 1 nisbətində daralacaqlar, yəni. birinci blok 200px, ikinci blok isə 100px ilə kiçiləcək və yeni element ölçüləri 100px və 200px olacaq.
Qeyd: siz dəyərdə kəsr ədədləri göstərə bilərsiniz, məsələn: 0,5 - flex-shrink:0,5
çevik əsas:Elementin əsas enini təyin edir - elementin eninə təsir edən digər şərtlər hesablanmazdan əvvəl eni. Qiymət px, em, rem, %, vw, vh və s.-də göstərilə bilər. Yaranan genişlik baza genişliyindən və flex-grow, flex-shrink dəyərlərindən və blokun içindəki məzmundan asılı olacaq. Auto ilə element içindəki məzmuna nisbətən əsas genişlik əldə edir.
Defolt: avtomatik
Bəzən elementin enini adi width xassəsindən sərt şəkildə təyin etmək daha yaxşıdır. Məsələn, eni: 50%; konteynerin içindəki elementin tam olaraq 50% olacağını ifadə edəcək, lakin flex-brow və flex-shrink xassələri hələ də işləyəcək. Bu, elementin içindəki məzmunla, çevik əsasda göstəriləndən daha çox uzandıqda lazım ola bilər. Misal.
uzanma və büzülmə sıfıra təyin olunarsa, çevik əsas "sərt" olacaq: flex-basis: 200px; flex-grow: 0; flex-shrink:0; . Bütün bunları belə yazmaq olar: flex:0 0 200px; .
flex: (böyümək kiçilmə əsası)Üç xüsusiyyətin qısa xülasəsi: flex-grow flex-shrink flex-basis .
Defolt: çevik: 0 1 avtomatik
Bununla belə, siz bir və ya iki dəyər təyin edə bilərsiniz:
Flex: yoxdur; /* 0 0 avtomatik */ /* nömrə */ flex: 2; /* flex-grow (flex-basis 0-a keçir) */ /* rəqəm deyil */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow və flex-basis */ flex: 2 2; /* flex-grow və flex-shrink (flex-əsas 0-a keçir) */ flex: 2 2 10%; /* flex-grow və flex-shrink and flex-basis */ align-self:
Yalnız bir element üçün align-items xassəsini dəyişməyə imkan verir.
Defolt: align-element konteynerindən
- uzanmaq- element xətti tam doldurmaq üçün uzanır
- flex-start- element xəttin əvvəlinə sıxılır
- flex-end- element xəttin sonuna qədər sıxılır
- Mərkəz- element xəttin mərkəzinə düzülür
əsas- element mətnin əsas xəttinə uyğunlaşdırılıb
Ümumi sıradakı elementin sırasını (vəzifəsini, mövqeyini) dəyişməyə imkan verir.
Defolt: sifariş: 0
Varsayılan olaraq, elementlərin sırası var: 0 və HTML kodunda görünmə sırasına və cərgənin istiqamətinə uyğun olaraq yerləşdirilir. Amma sifariş xassəsinin dəyərini dəyişdirsəniz, onda elementlər qiymətlər sırasına uyğun düzüləcək: -1 0 1 2 3 ... . Məsələn, elementlərdən biri üçün 1 sırasını təyin etsəniz, əvvəlcə bütün sıfırlar, sonra isə 1 olan element gedəcək.
Beləliklə, məsələn, qalan elementlərin hərəkət istiqamətini və ya HTML kodunu dəyişmədən birinci elementi sona köçürə bilərsiniz.
Qeydlər
Flex-basis və eni arasındakı fərq nədir?
Aşağıda çevik əsas və genişlik / hündürlük arasındakı mühüm fərqlər verilmişdir:
- Flex xüsusiyyətindən istifadə edərkən, 3 dəyər (flex-grow/flex-shrink/flex-basis) birləşdirilə və qısaca yazıla bilər, lakin eni böyütmək və ya daraltmaq üçün ayrıca yazmalısınız. Məsələn: flex:0 0 50% == width:50%; flex-shrink:0; . Bəzən sadəcə əlverişsiz olur.
flex-basis yalnız əsas ox üçün işləyir. Bu o deməkdir ki, flex-direction:row flex-basis ilə eni, flex-direction:column ilə isə hündürlüyə nəzarət edir. .
flex-basis yalnız çevik elementlərə aiddir. Bu o deməkdir ki, bir konteyner üçün flex-i söndürsəniz, bu xüsusiyyətin heç bir təsiri olmayacaq.
Mütləq konteyner elementləri çevik konstruksiyada iştirak etmir... Bu o deməkdir ki, flex-basis konteynerin çevik elementlərinə, əgər onlar mütləq mövqedirsə, onlara təsir göstərmir: absolute . Onlar eni/hündürlüyü təyin etməlidirlər.
Mümkünsə, yenə də elastik bazaya üstünlük verin. Genişlikdən yalnız çevik əsas uyğun olmadıqda istifadə edin.
Flex-basis və eni arasındakı fərq - səhv və ya xüsusiyyət?
Çevik elementin içindəki məzmun onu itələyir və ondan kənara çıxa bilməz. Bununla belə, genişliyi flex-basis əvəzinə genişlik və ya maksimum genişlikdən istifadə edərək təyin etsəniz, çevik konteynerin içindəki element həmin konteynerin hüdudlarından kənara çıxa biləcək (bəzən bu, istədiyiniz davranışdır). Misal:
Flex layout nümunələri
Nümunələrin heç bir yerində cross-brauzer uyğunluğu üçün istifadə olunan prefikslər yoxdur. Bunu css-i asan oxumaq üçün etdim. Buna görə də nümunələr üçün Chrome və ya Firefox-un ən son versiyalarına baxın.
#1 Şaquli və üfüqi düzülmə ilə sadə nümunə
Ən sadə nümunə ilə başlayaq - şaquli və üfüqi uyğunlaşma eyni zamanda və istənilən blok hündürlüyündə, hətta rezin.
Və ya bu kimi, içəridə blok olmadan:
#1.2 Çevik blok elementləri arasında ayırma (parçalanma).
Konteyner elementlərini kənarlar boyunca yerləşdirmək və fasilə yaranan elementi təsadüfi seçmək üçün margin-left:auto və ya margin-right:auto xassəsindən istifadə etməlisiniz.
№2 Çevik rejimdə adaptiv menyu
Səhifənin ən yuxarı hissəsində menyu yaradaq. Geniş ekranda sağda olmalıdır. Orta hesabla, ortada hizalayın. Kiçikdə isə hər bir element yeni sətirdə olmalıdır.
#3 Uyğunlaşan 3 sütun
Bu nümunə 3 sütunun tez və rahat şəkildə necə hazırlanacağını göstərir, bunlar daraldıqda 2-yə, sonra isə 1-ə çevriləcək.
Nəzərə alın ki, bu, media qaydalarından istifadə etmədən edilə bilər, hər şey çevikdir.
jsfiddle.net saytına gedin və “nəticə” bölməsinin enini dəyişdirin
#4 Fleksdən istifadə edərək adaptiv bloklar
Tutaq ki, biri böyük, ikisi kiçik olmaqla 3 blok çıxarmalıyıq. Eyni zamanda, blokların kiçik ekranlara uyğunlaşması lazımdır. Biz edirik:
jsfiddle.net saytına gedin və “nəticə” bölməsinin enini dəyişdirin
Çeviklik və keçid ilə #5 Qalereya
Bu nümunə flexdən istifadə edərək şəkillərlə şirin bir akkordeon hazırlaya biləcəyinizi göstərir. Fleks üçün keçid xüsusiyyətinə diqqət yetirin.
#6 Flex to Flex (yalnız bir nümunə)
Vəzifə çevik bir blok etməkdir. Belə ki, hər blokda mətnin başlanğıcı üfüqi olaraq eyni sətirdə olsun. Bunlar. Genişlik daraldıqca bloklar hündürlükdə böyüyür. Şəkilin yuxarıda olması, düymənin həmişə aşağıda olması və ortadakı mətnin bir üfüqi xətt boyunca başlaması lazımdır...
Bu problemi həll etmək üçün blokların özləri flex ilə uzanır və mümkün olan maksimum genişliyə təyin olunur. Hər bir daxili blok eyni zamanda çevik strukturdur, fırlanan oxun əyilmə istiqaməti:sütun; və ortadakı element (mətnin olduğu yerdə) uzanır flex-grow:1; bütün boş yeri doldurmaq üçün nəticə belə əldə edilir - mətn bir sətirlə başladı...
Daha çox nümunə
Brauzer dəstəyi - 98,3%
Əlbəttə ki, tam dəstək yoxdur, lakin bütün müasir brauzerlər flexbox dizaynlarını dəstəkləyir. Bəziləri hələ də prefiks tələb edir. Real şəkil üçün caniuse.com saytına baxaq və görək ki, bu gün istifadə edilən brauzerlərin 96,3%-i prefikssiz, 98,3%-i isə prefikslərdən istifadə edəcək. Bu, flexbox-dan inamla istifadə etmək üçün əla göstəricidir.
Hansı prefikslərin bu gün (iyun 2019) uyğun olduğunu bilmək üçün bütün çevik qaydalara nümunə verəcəyəm. lazımi prefikslərlə:
/* Konteyner */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:şaquli; -ms-flex-wrap:wrap; -webkit-box-pack:justify; :justify; align-content:space-around; -flex- mənfi:2; -ms-flex-preferred-size:1 2 100px; :3; -ms-flex-order:2);
Prefiksli xassələrin orijinal xüsusiyyətdən əvvəl getməsi daha yaxşıdır.
Bu siyahıda bu gün lazımsız olan heç bir prefiks yoxdur (caniuse görə), lakin ümumiyyətlə daha çox prefiks var.
Chrome | Safari | Firefox | Opera | İ.E. | Android | iOS |
---|---|---|---|---|---|---|
20- (yaş) | 3.1+ (köhnə) | 2-21 (yaş) | 10 (aralıq) | 2.1+ (köhnə) | 3.2+ (köhnə) | |
21+ (yeni) | 6.1+ (yeni) | 22+ (yeni) | 12.1+ (yeni) | 11+ (yeni) | 4.4+ (yeni) | 7.1+ (yeni) |
- (yeni) - yeni sintaksis: displey: flex; .
- (tweener) - 2011-ci ildən köhnə qeyri-rəsmi sintaksis: displey: flexbox; .
- (köhnə) - 2009-cu ildən köhnə sintaksis: displey: qutu;
Video
Yaxşı, videonu unutma, bəzən o da maraqlı və başa düşüləndir. Budur bir neçə məşhur:
Flex-də faydalı bağlantılar
flexboxfroggy.com - flexbox təhsil oyunu.
Flexplorer vizual çevik kod qurucusudur.