Flexbox в CSS и HTML (Урок) – разработка на реагиращи се макети

Това те очаква в курса по Flexbox в CSS и HTML.

Какво е Flexbox Layout и защо въобще трябва да се използва?

Тук се създава проектът, в който по-нататъшно ще се работи.

Представям тук структурата на примера и вградените в VS Code възможности за отстраняване на грешки с инструментите на MS Edge. Освен това в това видео за първи път се активира Flebox Layout-а и се настройва посоката.

Как може да се раздели равномерно или в определени пропорции мястото във Flexbox layout-a?

Малко упражнение, при което не можеш да избягаш от малко (лесна) математика.

Тук представям хоризонтално оформление с два странични пана, което се адаптира респонсивно към широчината.

Децата могат да бъдат подравнени от Flex контейнера вдълж положението на някоя ос.
(Когато дете е в този контейнер, кофтите са разпределени по центъра именно за децата.)

Не само при контейнера може да се настрои позиционирането на всички деца, с align-self това също може да се настрои по различен начин и за отделните елементи.

Малко упражнение за индивидуално насочване с кубче.

Не само по водачната ос може да се насочите в контейнер със свободно разположение, може също така да се насочите на много неща по отношение на насочването вдълж основната ос. ;-)

Един малък пример как се използва насочването вдълж основната ос и за чест лейаут на много добре.

За да може да бъде гъвкав, трябва също така да може да посочва размера на децата независимо от конкретната ширина или височина. На щастие има собствеността flex-basis-, с която точно това може да се постигне. Като се промени flex-direction, от ширина се прави височина и обратно. 

Колко трябва да нарасне един елемент, когато има повече място, отколкото е зададено от flex-basis? Това може да се настрои целенасочено с помощта на flex-grow.

На колко трябва да се свие един елемент, ако има по-малко място, отколкото е посочено в flex-basis? Това може да се настрои специфично с flex-shrink.

Детските елементи не само могат да се свиват, когато има по-малко място, но също и да се променят от контейнера. Как да контролирате това с flex-wrap, ще покажа в това видео.

flex-direction и flex-wrap могат да бъдат комбинирани в свойството flex-flow. Това има смисъл дори когато искате да зададете само flex-direction, тъй като flex-flow е по-кратко. ;-)

Задача за flex-wrap.

Понякога е необходимо да има разстояние, за да не стане твърде некомфортно за човешкото око. На щастие, с разстояние (gap) има CSS свойство, което постига точно това при децата елементи на Flex контейнера.

Редът е важен, особено в уеб интерфейсите, защото те трябва да бъдат лесни за използване. Поредността трябва понякога да се определя индивидуално, без да се преместват елементи в DOM структурата. За тази цел свойството на CSS order е много подходящо, с което лесно може да се промени видимата поредност на елементите.

Нека видим дали сте разбрали каква е последователността. Тук има дори втори начин да постигнете същия резултат, но със сигурност и върху този ще стигнете.

Често се случва, че искаме да центрираме елементи и особено текст хоризонтално и вертикално (!). Това, което преди беше мъка пред Flexbox, с Flexbox става като игра на деца.

Кой не познава триколонника? Ако той все още се адаптира към наличното пространство, не остава много до респонсивния дизайн.

Има ли уебсайтове без формуляри? Ако да, те са много малко. Затова е много важно да се подредят привлекателно, което, за щастие, не е проблем с Flexbox.

Много често се сблъскваме със сложни макети, но с Flex макетите дори и те не са голямо предизвикателство повече.

В момента има чат клиенти в интернет като пясък на морето и с изкуствените интелигентни чатботи се появяват още. Но как може да се реализира чат с Flexbox? Това ще покажа в това видео.

Не по-късно от Web 2.0 можете да намерите галерия на почти всяка уебстраница. В това видео ще обясня как подобно оформление може да бъде реализирано страхотно с Flexbox.

Сега всичко трябва да е ясно относно Flex Layout-а. Накрая ще опиша какво трябва да сте научили, какво още можете да направите и какви още красиви възможности за CSS Layout съществуват.