Flexbox nədir? Bütün css xüsusiyyətlərinin təsviri, əsas prinsipləri, üstünlükləri və mənfi cəhətləri. Flexbox Faydalı Flex keçidləri ilə işləmək üçün bəzi faydalı nümunələr

Flexbox, məzmunundan asılı olmayaraq bütün sütunların tam hündürlüyü tutmalı olduğu üç sütunlu, "Müqəddəs Qrail" adlanan düzən kimi tez-tez istifadə olunan veb sayt tərtibatlarını yaratmaq üçün idealdır. Bu halda mənbə kodunda əsas məzmun naviqasiyadan əvvəl, səhifənin özündə isə əsas məzmun naviqasiyadan sonra gəlir.

Bunun kimi.

Misal

Bir papaq

Məqalə

Flexbox-un meydana çıxmasından əvvəl, bu cür tərtibatı bir növ hack istifadə etmədən əldə etmək olduqca çətin idi. Tərtibatçılar tez-tez məzmunun miqdarından və ya ekran ölçüsündən asılı olmayaraq hər şeyi düzgün şəkildə sıralamaq üçün əlavə işarələmə əlavə etmək, mənfi kənarları tətbiq etmək və digər tövsiyələr etməli olurdular. Ancaq yuxarıdakı nümunədən göründüyü kimi, flexbox-da hər şey daha sadədir.

Budur kodun xülasəsi. Bu misalda biz #main elementini çevik konteynerə çeviririk, eyni zamanda başlıq və altbilgini blok səviyyəli elementlər kimi buraxırıq. Başqa sözlə, yalnız orta hissə flexbox olur. Budur, onu çevik konteynerə çevirən bir parça.

#main (ekran: flex; min hündürlük: calc(100vh - 40vh); )

Biz sadəcə ekrandan istifadə edirik: çevik konteyner etmək üçün. Diqqət yetirin ki, biz həmçinin calc() funksiyası ilə minimum hündürlük dəyərini təyin edirik və #main-i görünüş sahəsinin hündürlüyünün 100%-nə təyin edirik. mənfi qapağın və zirzəminin hündürlüyü (hər biri 20vh). Bu, az məzmuna malik olsa belə, tərtibatın ekranın tam hündürlüyünü tutacağını təmin edir. Nəticədə, məzmun ekranın hündürlüyündən az yer tutursa, altbilgi heç vaxt qalxmayacaq və onun altında boş yer qoymayacaq.

Bütün elementlərə qutu ölçüsünü: sərhəd qutusunu tətbiq etdiyimizi nəzərə alsaq, minimum hündürlüyün hesablanması kifayət qədər asan idi. Əgər etməsəydik, əlavə etməli olardıq doldurma dəyəriçıxılacaq məbləğə.

Flex konteynerini quraşdırdıqdan sonra biz çevik elementlərlə məşğul oluruq.

#main > article ( flex: 1; ) #main > nav, #main > side ( flex: 0 0 20vw; fon: bej; ) #main > nav (sifariş: -1; )

Flex xassələri flex-grow, flex-shrink və flex-basis xassələrinin stenoqrafiyasıdır. Birinci halda biz yalnız bir dəyər yazdıq, ona görə də flex flex-grow xassəsini təyin edir. İkinci halda, hər üç dəyəri yazdıq

Və

flex-grow-u sıfıra, flex-shrink-i sıfıra və flex-bazı 20vw-a təyin etmək. Flex-basis xüsusiyyəti boş yerin ayrılmasından əvvəl çevik elementin orijinal əsas ölçüsünü təyin edir. Beləliklə, biz yalnız eni təyin edirik

Və

, həmçinin onların fon rəngi.

Bu yazıda biz çevik veb səhifə tərtibatları yaratmaq üçün nəzərdə tutulmuş CSS Flexbox texnologiyası ilə tanış olacağıq.

CSS Flexbox-un məqsədi

CSS Flexbox üçündür çevik planların yaradılması. Bu texnologiya ilə elementləri konteynerdə yerləşdirmək, onlar arasında mövcud boşluğu bölüşdürmək və müəyyən ölçüləri olmasa belə, onları bu və ya digər şəkildə hizalamaq çox asan və çevikdir.

CSS Flexbox, float və yerləşdirmə istifadə etməkdənsə, cavab verən dizayn yaratmağı çox asanlaşdırır.

Flexbox həm bütün səhifənin CSS işarələnməsi, həm də onun fərdi blokları üçün istifadə edilə bilər.

CSS Flexbox brauzer dəstəyi

CSS Flexbox hazırda istifadə olunan bütün müasir brauzerlər tərəfindən dəstəklənir (prefikslərdən istifadə etməklə: 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 Əsasları

Flexbox ilə CSS işarələməsinin yaradılması tələb olunan HTML elementinin ekran CSS xassəsini flex və ya flex-inline olaraq təyin etməklə başlayır.

Bundan sonra, bu element çevik bir konteynerə çevrilir və onun hamısı dərhal uşaq elementlər çevik elementlərdir. Üstəlik, flexbox haqqında danışarkən biz bununla yalnız display:flex və ya display:flex-inline və bütün elementləri olan elementi nəzərdə tuturuq. birbaşa içində yerləşir. Beləliklə, CSS Flexbox-da yalnız iki növ element var: çevik konteyner və çevik element.

Əksər brauzerlər tərəfindən tərtibat dəstəyi üçün CSS-ə prefiksli və maksimum genişlik xüsusiyyətləri əlavə edilmişdir.

Bloku çevik konteynerə "çevirmək" üçün sıra sinifindən istifadə olunur. Flex konteyner daxilində .col__article və .col__aside flex elementlərinin eninin təyini flex CSS xassəsindən istifadə etməklə həyata keçirilir.

Nümunə olaraq, flexbox-dan istifadə edərək başqa altbilgi yerləşdirək və .col__article elementində üç elementdən ibarət blok yaradaq (bir elementin minimum eni 300px). Altbilgidə dörd blok yerləşdirəcəyik (bir blokun minimum eni 200px).

FlexBox haqqında danışmaq istərdim. Flexbox layout modulu (çevik qutu - "çevik blok", hazırda W3C Namizəd Tövsiyəsi) konteynerdəki elementlər arasında boş yerin düzülməsi, hizalanması və paylanması üçün daha səmərəli üsul təklif etmək məqsədi daşıyır, hətta onların ölçüsü naməlum və/və ya dinamik olduqda belə ( buna görə də "çevik" sözü).

Flex layoutun əsas ideyası konteynerə məkanı daha yaxşı doldurmaq üçün elementlərinin enini / hündürlüyünü (və qaydasını) dəyişdirmək imkanı verməkdir (əksər hallarda bütün növ displeyləri və ekran ölçülərini dəstəkləmək üçün).Çevik konteyner boşluqları doldurmaq üçün elementləri uzadır və ya daşmasının qarşısını almaq üçün onları sıxır.

Ən əsası, flexbox düzeni adi planlardan fərqli olaraq istiqamətsizdir (qutular şaquli və daxili elementlər üfüqidir).Müntəzəm tərtibat veb səhifələr üçün əla olsa da, böyük və ya mürəkkəb proqramları dəstəkləmək üçün çeviklik yoxdur (xüsusilə ekran oriyentasiyasının dəyişdirilməsi, ölçüsünün dəyişdirilməsi, uzanması, sıxılması və s.).

Çünki flexbox bütöv bir moduldur, tək bir xüsusiyyət deyil, bir çox xüsusiyyətləri birləşdirir.Onlardan bəziləri konteynerə (ana element, aka çevik konteyner) tətbiq edilməlidir, digər xüsusiyyətlər isə uşaq elementlərə və ya çevik elementlərə aiddir.

Müntəzəm tərtibat blokun və daxili elementlərin axın istiqamətlərinə əsaslansa da, çevik tərtibat "çevik axın istiqamətləri"nə əsaslanır.

Flexbox

Əsasən, maddələr ya əsas ox boyunca (əsas başlanğıcdan əsas sona) və ya çarpaz ox boyunca (çarpaz başlanğıcdan çarpaz sona) paylanacaq.

əsas ox - çevik elementlərin yerləşdiyi əsas ox.Nəzərə alın ki, o, üfüqi olmalıdır, hamısı əsaslandırılmış məzmunun keyfiyyətindən asılıdır.
əsas başlanğıc | main-end - flex maddələr əsas başlanğıc mövqeyindən əsas son vəziyyətə qədər konteynerə yerləşdirilir.
əsas ölçü - seçilmiş əsas ölçüdən asılı olaraq çevik elementin eni və ya hündürlüyü.Əsas dəyər elementin eni və ya hündürlüyü ola bilər.
çarpaz ox — əsas birinə perpendikulyar olan eninə ox.Onun istiqaməti əsas oxun istiqamətindən asılıdır.
çarpaz başlanğıc | cross-end - flex xətləri maddələrlə doldurulur və çarpaz başlanğıc və çarpaz mövqedən konteynerə yerləşdirilir.
çarpaz ölçüsü - seçilmiş ölçüdən asılı olaraq çevik elementin eni və ya hündürlüyü bu dəyərə bərabərdir.Bu xüsusiyyət seçilmiş ölçüdən asılı olaraq elementin eni və ya hündürlüyü ilə eynidir.

Xüsusiyyətlər
ekran: flex | inline-flex;

Çevik konteyneri müəyyən edir (seçilmiş dəyərdən asılı olaraq daxili və ya blok), onun bütün birbaşa uşaqları üçün çevik kontekst daxildir.

ekran: digər dəyərlər | flex | inline-flex;

Yadında saxla:

CSS sütunları çevik konteynerlə işləmirfloat, aydın və şaquli hizalama çevik elementlərdə işləmir

əyilmə istiqaməti