Описание на всички свойства на CSS, основни принципи, предимства и недостатъци. Какво е Flexbox? Описание на всички css свойства, основни принципи, предимства и недостатъци 2 използване на flexbox за създаване на следната структура на страницата

На примера на формуляр от реална тестова задача ще ви покажа как да оформите според BEMизползвайки flexbox. Може да попитате: „Защо е необходимо да се набира според BEM + Flexbox?" Това изискване идва от работодателя. Цитат от декларацията за работа: "Опитайте се да набирате без рамки (за предпочитане на flexbox), просто и ясно: избягвайте тромавите структури и ненужния код, използвайте методологията BEM."

Фрагмент от оформление на разрез с формуляр

Моите правила за оформление

1. Разделете оформлението на логически секции
2. Започнете всеки раздел с етикет раздел
3. Отделни секции и CSSуправлявани един от друг, празен ред
4. Задайте клас на всеки таг
5. Името на класа за блок или елемент, отговаря на въпроса - Какво е това?
6. Името на модификатора отговаря на въпроса - Който?

HTML маркиране

Първо, правя маркиране, определям влагането на блокове и измислям имена за класове. В кода по-долу имаме два вградени тагова - h2И вход. Вградените тагове са главоболие и причина за стрес за начинаещите дизайнери на оформление. Защо? Те се държат много лошо - опитват се да заемат цялата налична ширина и не ви позволяват да зададете цвета на фона и размерите на целия блок.

лична информация

Какво прави лош дизайнер на оформление в този случай? Той обгръща вградени елементи в блокови тагове диви задава всички необходими свойства на етикета за обвивка. Дъщерните вградени елементи наследяват тези свойства. Струва ли си да се вдига шум с допълнителен код? Какво би направил един компетентен дизайнер на оформление? Той ще предефинира вградения елемент за блокиране или вграден блок CSSправила

Дисплей: блок; // за тага за въвеждане
дисплей: inline-block; // за h2 таг

Логика на влагане и имена на блокове

Виждаме раздел с лична информация, така че наричаме раздела клас - инфо. Секцията се състои от три дъщерни елемента:

Икона // име на клас info__icon
заглавие // информация__заглавие
форма // информация__форма

Въпросът е в имената на класовете BEM, се състои в принадлежността на дъщерен елемент към родител. Елементът не може да бъде наименуван икона. Това не е каква да е икона, а икона от секцията инфо.

Дъщеря и родител събрани в едно

Блокирайте информация__форма, имаме специален - той е вложен в секцията инфо, но в същото време съдържа полета на формуляр. Името на това явление е многостепенно гнездене. Блокът с формуляра има чисто обвиваща функция за входове, така че можете лесно да задавате външни полета. В края на краищата въведените с малки букви се държат като деца (които са), те изобщо не се подчиняват. Освен това вторият вход е по-къс от всички останали и се различава само по ширина.

Задаваме един клас за всички входове с еднакви свойства, с изключение на ширината - info__input. За редовни входове добавете модификатор info__input_long, а на краткия вход се дава модификатор info__input_short. Нека ви напомня, че модификаторът BEM, трябва да отговори на въпроса - Който?

CSS правила за модификатори

Info__input_short(
ширина: 320px;
}

CSS код

IN HTMLмаркирането създава груба структура на сайта, в CSS, вече поставяме елементите според оформлението. Днес няма да пипаме външен вид, но нека се съсредоточим върху позиционирането на елементите. В нашия раздел има два гъвкави контейнера. Трябва да се каже, че използването на флекси, когато всички елементи са разположени един по един на линия, е много съмнително. Единствената получена облага е собствеността justify-content, центрирано, гъвкави елементи. Мога да кажа в своя защита, че идеята за гъвкавост е безсмислена само в контекста на този раздел. Истинското оформление за оформление обикновено има повече разнообразие.

информация (
дисплей: гъвкав;
justify-content: център;
подравняване на елементи: център;
flex-direction: колона;
margin-top: 77px;
височина: 100%;
}

Информация__формуляр (
дисплей: гъвкав;
justify-content: център;
flex-direction: колона;
височина: 100%;
margin-top: 50px;

Бих искал да говоря за FlexBox. Модулът за оформление Flexbox (гъвкава кутия, понастоящем препоръка за кандидати от W3C) има за цел да предложи повече ефективен методоформление, подравняване и разпространение свободно пространствомежду елементи в контейнер, дори когато размерът им е неизвестен и/или динамичен (оттук и думата „гъвкав“).

Основната идея на гъвкавото оформление е да даде възможност на контейнера да променя ширината/височината (и реда) на своите елементи, за да запълни по-добре пространството (в повечето случаи, за да поддържа всички видове дисплеи и размери на екрана).Гъвкавият контейнер разтяга елементите, за да запълнят пространството, или ги компресира, за да предотврати преливането им.

Най-важното е, че оформлението на flexbox не зависи от посоката, за разлика от конвенционалните оформления (блокове, подредени вертикално, и вградени елементи, подредени хоризонтално).Въпреки че обикновеното оформление е чудесно за уеб страници, липсва му гъвкавостта да поддържа големи или сложни приложения(особено когато става въпрос за промяна на ориентацията на екрана, преоразмеряване, разтягане, свиване и т.н.).

защото flexbox е цял модул, а не само едно свойство, той комбинира много свойства.Някои от тях трябва да бъдат приложени към контейнера (родителския елемент, наречен гъвкав контейнер), докато други свойства се прилагат към дъщерните елементи или гъвкавите елементи.

Докато обикновеното оформление се основава на посоките на потока на блокови и вградени елементи, гъвкавото оформление се основава на „гъвкави посоки на потока“.

Flexbox

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

main-axis — основната ос, по която са разположени гъвкавите елементи.Моля, обърнете внимание, че трябва да е хоризонтално, всичко зависи от качеството на оправдаващото съдържание.
основен старт | main-end - гъвкавите елементи се поставят в контейнера от основната начална позиция до основната крайна позиция.
основен размер — ширина или височина на гъвкавия елемент в зависимост от избрания основен размер.Базовото количество може да бъде както ширината, така и височината на елемента.
напречна ос - напречна ос, перпендикулярна на основната.Посоката му зависи от посоката на главната ос.
кръстосано начало | напречен край - гъвкавите линии се запълват с елементи и се поставят в контейнера от напречна начална позиция и напречна крайна позиция.
напречен размер — ширината или височината на гъвкавия елемент, в зависимост от избрания размер, е равна на тази стойност.Това свойство е същото като ширината или височината на елемента в зависимост от избраното измерение.

Имоти
дисплей: flex | inline-flex;

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

дисплей: други стойности | гъвкав | inline-flex;

Имайте предвид:

CSS колоните не работят с гъвкав контейнерfloat, clear и vertical-align не работят с flex елементи

flex-direction

Прилага се преди родителския елемент на гъвкавия контейнер.

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

гъвкава посока: ред | ред-обратен | колона | колона-реверс

ред (по подразбиране): отляво надясно за ltr, отдясно наляво за rtl;
ред-обратно: отдясно наляво за ltr, отляво надясно за rtl;
колона: подобна на ред, отгоре надолу;
обръщане на колона: подобно на обръщане на ред, отдолу нагоре.

гъвкава обвивка

Прилага се преди родителския елемент на гъвкавия контейнер.

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

flex-wrap: nowrap | увивам | обвиване-обратно

nowrap (по подразбиране): един ред / отляво надясно за ltr, отдясно наляво за rtl;
обвиване: многоредов / отляво надясно за ltr, отдясно наляво за rtl;
wrap-reverse: многоредов / отдясно наляво за ltr, отляво надясно за rtl.

flex-flow

Прилага се преди родителския елемент на гъвкавия контейнер.

Това е съкращение за свойствата flex-direction и flex-wrap, които заедно определят главната и напречната ос.Стойността по подразбиране е row nowrap.

flex-flow< ‘flex-direction’> || < ‘Flex-wrap’>

justify-content

Прилага се преди родителския елемент на гъвкавия контейнер.

Определя подравняването спрямо главната ос.Помага за разпределяне на свободното пространство в случай, че елементите на линията не се „разтягат“ или се разтягат, но вече са достигнали максималния си размер.Също така позволява известен контрол върху подравняването на елементите, когато излизат извън линията.

justify-content: flex-start | гъвкав край | център | интервал между | пространство-около

flex-start (по подразбиране): елементите се преместват в началото на реда;
flex-end: елементите се придвижват до края на реда;
център: елементите са подравнени до средата на линията;
интервал между: елементите се разпределят равномерно (първият елемент в началото на реда, последният в края)
space-around: елементите са разпределени равномерно на еднакво разстояние един от друг и извън линията.

justify-content
подравняване на елементи

Прилага се преди родителския елемент на гъвкавия контейнер.

Дефинира поведението по подразбиране за това как гъвкавите елементи се позиционират спрямо напречната ос на текущия ред.Мислете за това като за версия на оправдано съдържание за напречната ос (перпендикулярна на основната).

подравняване на елементи: flex-start | гъвкав край | център | базова линия | опъвам, разтягам

flex-start: граница на кръстосано начало за елементи, разположени в позиция на кръстосано начало;
flex-end: кръстосана крайна граница за елементи, разположени в напречна крайна позиция;
център: елементите са подравнени към центъра на напречната ос;
базова линия: елементите са подравнени спрямо основната си линия;
разтягане (по подразбиране): елементите се разтягат, за да запълнят контейнера (като се вземе предвид мин./макс. ширина).

подравняване на елементи
подравняване на съдържание

Прилага се преди родителския елемент на гъвкавия контейнер. Подравнява редовете на гъвкав контейнер, когато има свободно място по напречната ос, подобно на начина, по който justify-content прави по главната ос. Забележка: Това свойство не работи с едноредови flexboxes.

подравняване на съдържание: гъвкаво начало | гъвкав край | център | интервал между | пространство-около | опъвам, разтягам

flex-start: линиите са подравнени спрямо началото на контейнера;
flex-end: линиите са подравнени спрямо края на контейнера;
център: линиите са подравнени към центъра на контейнера;
интервал между: редовете се разпределят равномерно (първият ред в началото на реда, последният в края)
пространство около: линиите са разпределени равномерно на еднакво разстояние една от друга;
разтягане (по подразбиране): Линиите се разтягат, за да запълнят наличното пространство.

подравняване на съдържание
поръчка

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

поръчка 1

flex-grow

Прилага се към дъщерния елемент/гъвкавия елемент. Дефинира способността на гъвкавия елемент да „растат“, ако е необходимо.Приема безразмерна стойност и служи като пропорция.Той определя колко свободно пространство може да заеме даден елемент вътре в контейнер. Ако всички елементи имат свойството flex-grow, зададено на 1, тогава всяко дете ще получи същия размер вътре в контейнера.Ако зададете едно от децата на 2, то ще заема два пъти повече място от останалите.

flex-grow (по подразбиране 0)

flex-shrink

Прилага се към дъщерния елемент/гъвкавия елемент.

Дефинира способността на гъвкав елемент да се свие, когато е необходимо.

flex-shrink (по подразбиране 1)

Отрицателни числа не се приемат.
flex-основа

Прилага се към дъщерния елемент/гъвкавия елемент. Определя размера по подразбиране за елемент, преди да разпредели място в контейнера.

flex-основа | автоматично (автоматично по подразбиране)

flex

Прилага се към дъщерния елемент/гъвкавия елемент. Това е съкращение за flex-grow, flex-shrink и flex-basis.Вторият и третият параметър (flex-shrink, flex-basis) не са задължителни.Стойността по подразбиране е 0 1 автоматично.

flex: няма | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

самоподравняване

Прилага се към дъщерния елемент/гъвкавия елемент. Позволява ви да замените подравняването по подразбиране или подравняване на елементи за отделни гъвкави елементи. Обърнете се към описанието на свойството align-items за по-добро разбиране на наличните стойности.

подравняване: автоматично | гъвкав старт | гъвкав край | център | базова линия | опъвам, разтягам

Примери
Да започнем с много, много прост пример, се случва почти всеки ден: подравняването е точно в центъра.Нищо не може да бъде по-лесно, ако използвате flexbox.

Parent ( display: flex; height: 300px; ) .child ( width: 100px; / * Whatever * / height: 100px; / * Whatever * / margin: auto; / * Magic! * / )

Този пример разчита на факта, че маржът под flex контейнера, зададен на auto, изяжда допълнително пространство, така че задачата за отстъп по този начин ще подравни елемента точно в центъра на двете оси. Сега нека използваме някои свойства.Представете си набор от 6 елемента с фиксиран размер (за красота), но с възможност за преоразмеряване на контейнера.Искаме да ги разпределим равномерно хоризонтално, така че когато преоразмерим прозореца на браузъра, всичко да изглежда добре (без @media заявки!).

Гъвкав контейнер (
/ * Първо, нека създадем гъвкав контекст * /
дисплей: гъвкав;

/* Сега нека определим посоката на потока и дали искаме елементите
прехвърлен към нова линия
*Запомнете, че това е същото като:
* Flex-посока: ред;
* Flex-wrap: обвиване;
* /
flex-flow: обвиване на редове;

/ * Сега нека да определим как ще бъде разпределено пространството * /
}

Готов. Всичко останало е въпрос на регистрация. Нека опитаме нещо друго.Представете си, че искаме дясно подравнена навигация в най-горната част на нашия сайт, но искаме да е централно подравнена на средно големи екрани и да се превърне в една колона на малки.Всичко е съвсем просто.

/*Големи екрани*/
.navigation(
дисплей: гъвкав;
flex-flow: обвиване на редове;
/* Измества елементите до края на реда по главната ос * /
justify-content: flex-end;
}

всички медии и (максимална ширина: 800 пиксела) (
.navigation(
/* За средни екрани центрираме навигацията,
равномерно разпределение на свободното пространство между елементите * /
justify-content: space-around;
}
}

/*Малки екрани*/
всички медии и (максимална ширина: 500 пиксела) (
.navigation(
/ * На малки екрани, вместо в ред, подреждаме елементите в колона * /
flex-direction: колона;
}
}

Нека си поиграем с гъвкавостта на гъвкавите елементи!Какво ще кажете за удобно за мобилни устройства оформление с три колони с горен и долен колонтитул с пълна ширина?И в различен ред на подреждане.

Обвивка (
дисплей: гъвкав;
flex-flow: обвиване на редове;
}

/ * Задайте всички елементи на 100% ширина * /
.header, .main, .nav, .aside, .footer (
гъвкавост 1100%;
}

/* В този случай ние разчитаме на оригиналната поръчка да ни води
* Мобилни устройства:
* 1 заглавка
* 2 нав
* 3 основни
* 4 настрани
* 5 долен колонтитул
* /

/*Средни екрани*/
всички медии и (мин. ширина: 600 пиксела) (
/ * И двете странични ленти са разположени на един ред * /
.настрани (гъвкав: 1 автоматичен; )
}

/*Големи екрани*/

Накратко, оформлението с Flexbox ни дава прости решениянякога трудни задачи. Например, когато трябва да подравните елемент вертикално или да натиснете долния колонтитул в долната част на екрана или просто да вмъкнете няколко блока в един ред, така че да заемат цялото свободно пространство. Подобни проблеми могат да бъдат решени без флекс. Но като правило тези решения са по-скоро като „патерици“ - техники за използване на CSS за цели, различни от предназначението им. Докато с flexbox такива задачи се решават точно както е предназначен за flex модела.

Модулът CSS Flexible Box Layout (CSS модул за оформления с гъвкави блокове), накратко flexbox, е създаден, за да елиминира недостатъците при създаването на голямо разнообразие от HTML дизайни, включително тези, адаптирани към различни ширини и височини, и да направи оформлението логично и просто . И логичният подход, като правило, работи на неочаквани места, където резултатът не е проверен - логиката е всичко!

Flexbox ви позволява елегантно да контролирате различни параметри на елементи в контейнер: посока, ред, ширина, височина, подравняване надлъжно и напречно, разпределение на свободното пространство, разтягане и компресиране на елементите.

Основни познания

FlexBox се състои от контейнер и неговите елементи (гъвкави елементи).

За да активирате flexbox, всеки HTML елементпросто задайте CSS свойството display:flex; или дисплей: inline-flex; .

След като активирате свойството flex, вътре в контейнера се създават две оси: главна и напречна (перпендикулярна (⊥), напречна ос). Всички вложени елементи (от първо ниво) са подредени по главната ос. По подразбиране главната ос е хоризонтална и насочена отляво надясно (→), а напречната ос е съответно вертикална и насочена отгоре надолу (↓).

Основната и напречната ос могат да бъдат разменени, тогава елементите ще бъдат разположени отгоре надолу (↓) и когато вече не се побират във височина, ще се преместят отляво надясно (→) - т.е. осите просто са разменени местата . В този случай началото и краят на подредбата на елементите не се променят - променят се само посоките (осите)! Ето защо трябва да си представите осите вътре в контейнера. Но не трябва да се мисли, че има някакви „физически” оси и те влияят на нещо. Оста тук е само посоката на движение на елементите вътре в контейнера. Например, ако посочихме подравняването на елементите към центъра на главната ос и след това променихме посоката на тази главна ос, тогава подравняването ще се промени: елементите бяха в средата хоризонтално, но станаха в средата вертикално... Вижте примера.

Друга важна характеристика на Flexbox е наличието на редове в напречна посока. За да разберем за какво говорим, нека си представим, че има главна хоризонтална ос, има много елементи и те не се „побират“ в контейнера, така че се преместват на друг ред. Тези. контейнерът изглежда така: контейнер с два реда вътре, като всеки ред съдържа няколко елемента. Въведени? Сега не забравяйте, че можем да подравняваме вертикално не само елементи, но и редове! Как работи това се вижда ясно в примера за имота. А ето как изглежда схематично:

Свойствата на CSS, които могат да повлияят на модела на оформление: float, clear, vertical-align, колони не работят при гъвкав дизайн. Тук се използва различен модел за конструиране на оформление и тези CSS свойства просто се игнорират.

CSS свойства на Flexbox

Flexbox съдържа различни css правилаза контролиране на целия гъвкав дизайн. Някои трябва да бъдат приложени към основния контейнер, а други към елементите на този контейнер.

За контейнер

Активира свойството flex за елемента. Това свойство обхваща самия елемент и неговите вложени елементи: засегнати са само наследниците от първо ниво - те ще станат елементи на гъвкавия контейнер.

• flex- елементът се простира по цялата ширина и има собствен пълно пространствосред околните блокове. Прекъсванията на редовете се появяват в началото и в края на блока.
• inline-flex- даден елемент е обвит около други елементи. В този случай вътрешната му част е форматирана като блоков елемент, а самият елемент е форматиран като inline.

flex и inline-flex се различават по това, че взаимодействат по различен начин с околните елементи, подобно на display:block и display:inline-block.

Променя посоката на главната ос на контейнера. Напречната ос се променя съответно.

• ред (по подразбиране)- посока на елементите отляво надясно (→)
• колона- посока на елементите отгоре надолу (↓)
• ред-обратен- посока на елементите от дясно на ляво (←)
• колона-реверс- посока на елементите отдолу нагоре ()

Контролира прехвърлянето на елементи, които не се побират в контейнера.

• nowrap (по подразбиране)- вложените елементи се поставят в един ред (с direction=ред) или в една колона (с direction=колона) независимо дали се побират в контейнера или не.
• обвивам- включва преместване на елементи към следващия ред, ако не се побират в контейнера. Това позволява движението на елементите по напречната ос.
• обвиване-обратно- същото като wrap, само прехвърлянето няма да е надолу, а нагоре (в обратната посока).

Съчетава както свойствата на посоката на огъване, така и свойствата на огъване. Те често се използват заедно, така че свойството flex-flow е създадено, за да помогне за писането на по-малко код.

flex-flow приема стойностите на тези две свойства, разделени с интервал. Или можете да посочите една стойност за всяко свойство.

/* само flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: колона; flex-flow: колона-реверс; /* само flex-wrap */ flex-flow: nowrap; flex-flow: обвивка; flex-flow: wrap-reverse; /* и двете стойности наведнъж: flex-direction и flex-wrap */ flex-flow: row nowrap; flex-flow: обвиване на колони; flex-flow: колона-реверс wrap-реверс; justify-content:

Подравнява елементи по главната ос: ако direction=ред, тогава хоризонтално и ако direction=колона, тогава вертикално.

• гъвкав старт (по подразбиране)- елементите ще вървят от началото (може да остане малко място в края).
• гъвкав край- елементите са подравнени в края (интервалът ще остане в началото)
• център- в центъра (ще остане пространство отляво и отдясно)
• интервал между- най-външните елементи се притискат към ръбовете (пространството между елементите се разпределя равномерно)
• пространство-около- свободното пространство е равномерно разпределено между елементите (най-външните елементи не са притиснати към краищата). Разстоянието между ръба на контейнера и външните елементи ще бъде наполовина по-малко от пространството между елементите в средата на реда.
• пространство-равномерно

Подравнява редовете, съдържащи елементи по напречната ос. Същото като justify-content само за противоположната ос.

Забележка: Работи, когато има поне 2 реда, т.е. Ако има само 1 ред, нищо няма да се случи.

Тези. ако flex-direction: row , тогава това свойство ще подравни невидимите редове вертикално. Тук е важно да се отбележи, че височината на блока трябва да е твърдо зададена и трябва да е по-голяма от височината на редовете, в противен случай самите редове ще разтеглят контейнера и всяко тяхно подравняване става безсмислено, тъй като между тях няма свободно пространство. тях... Но когато flex-direction: column , тогава редовете се движат хоризонтално → и ширината на контейнера почти винаги е по-голяма от ширината на редовете и подравняването на редовете веднага има смисъл...

• разтягане (по подразбиране)- редовете се разтягат, за да запълнят реда изцяло
• гъвкав старт- редовете са групирани в горната част на контейнера (може да остане малко място в края).
• гъвкав край- редовете са групирани в долната част на контейнера (пространството ще остане в началото)
• център- редовете са групирани в центъра на контейнера (пространството ще остане в краищата)
• интервал между- външните редове се притискат към краищата (пространството между редовете се разпределя равномерно)
• пространство-около- свободното пространство е равномерно разпределено между редовете (най-външните елементи не са притиснати към краищата). Разстоянието между ръба на контейнера и външните елементи ще бъде наполовина по-малко от пространството между елементите в средата на реда.
• пространство-равномерно- същото като space-around, само разстоянието между външните елементи и ръбовете на контейнера е същото като между елементите.

Подравнява елементи по напречната ос в рамките на ред (невидим ред). Тези. Самите редове се подравняват чрез align-content, а елементите в тези редове (редове) се подравняват чрез align-items и по цялата напречна ос. Няма такова разделение по главната ос, няма концепция за редове и елементите се подравняват чрез justify-content.

• разтягане (по подразбиране)- елементите се разтягат, за да запълнят изцяло линията
• гъвкав старт- елементите се притискат към началото на реда
• гъвкав край- елементите се притискат до края на реда
• център- елементите са подравнени към центъра на реда
• базова линия- елементите са подравнени спрямо основната линия на текста

За контейнерни елементи

Задава коефициента на увеличение на елемента, когато има свободно място в контейнера. По подразбиране flex-grow: 0 т.е. никой от елементите не трябва да расте и да запълва свободното пространство в контейнера.

По подразбиране flex-grow: 0

• Ако зададете flex-grow:1 за всички елементи, тогава всички те ще се разтегнат еднакво и ще запълнят цялото свободно пространство в контейнера.
• Ако зададете flex-grow:1 на един от елементите, той ще запълни цялото свободно пространство в контейнера и подравняванията чрез justify-content вече няма да работят: няма свободно място за подравняване...
• С flex-grow:1. Ако един от тях има flex-grow:2, тогава той ще бъде 2 пъти по-голям от всички останали
• Ако всички гъвкави кутии във гъвкав контейнер имат flex-grow:3, тогава те ще бъдат с еднакъв размер
• С flex-grow:3. Ако един от тях има flex-grow:12, тогава той ще бъде 4 пъти по-голям от всички останали

Как работи? Да приемем, че един контейнер е широк 500px и съдържа два елемента, всеки с основна ширина 100px. Това означава, че в контейнера са останали 300 свободни пиксела. Сега, ако посочим flex-grow:2; , а вторият flex-grow: 1; , тогава блоковете ще заемат цялата налична ширина на контейнера и ширината на първия блок ще бъде 300px, а на втория 200px. Това се обяснява с факта, че наличните 300px свободно пространство в контейнера бяха разпределени между елементите в съотношение 2:1, +200px за първия и +100px за втория.

Забележка: можете да посочите дробни числа в стойността, например: 0,5 - flex-grow:0,5

Задава коефициента на намаляване на елемента. Свойството е обратното на flex-grow и определя как елементът трябва да се свие, ако в контейнера не остане свободно място. Тези. свойството започва да работи, когато сумата от размерите на всички елементи е по-голяма от размера на контейнера.

Флекс-свиване по подразбиране:1

Да приемем, че контейнерът е широк 600px и съдържа два елемента, всеки с ширина 300px - flex-basis:300px; . Тези. два елемента напълно запълват контейнера. Дайте на първия елемент flex-shrink: 2; , а вторият flex-shrink: 1; . Сега нека намалим ширината на контейнера с 300px, т.е. елементите трябва да се свият с 300px, за да се поберат вътре в контейнера. Те ще се свиват в съотношение 2:1, т.е. първият блок ще се свие с 200px, а вторият със 100px и новите размери на елемента ще станат 100px и 200px.

Забележка: можете да посочите дробни числа в стойността, например: 0,5 - flex-shrink:0,5

Задава основната ширина на елемента - ширината преди да бъдат изчислени други условия, влияещи върху ширината на елемента. Стойността може да бъде посочена в px, em, rem, %, vw, vh и т.н. Крайната ширина ще зависи от основната ширина и стойностите на flex-grow, flex-shrink и съдържанието вътре в блока. С auto елементът получава основна ширина спрямо съдържанието вътре в него.

По подразбиране: автоматично

Понякога е по-добре да зададете твърдо ширината на даден елемент чрез обичайното свойство width. Например ширина: 50%; ще означава, че елементът вътре в контейнера ще бъде точно 50%, но свойствата flex-grow и flex-shrink ще продължат да работят. Това може да е необходимо, когато елементът е разтегнат от съдържанието вътре в него, повече от определеното във flex-basis. Пример.

flex-basis ще бъде „твърд“, ако разтягането и свиването са зададени на нула: flex-basis:200px; flex-grow:0; гъвкаво свиване:0; . Всичко това може да се напише така: flex:0 0 200px; .

Кратко резюме на трите свойства: flex-grow flex-shrink flex-basis.

По подразбиране: flex: 0 1 auto

Можете обаче да посочите една или две стойности:

Flex: няма; /* 0 0 auto */ /* номер */ flex: 2; /* flex-grow (flex-basis отива на 0) */ /* не е число */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: съдържание; /* flex-basis: съдържание */ flex: 1 30px; /* flex-grow и flex-basis */ flex: 2 2; /* flex-grow и flex-shrink (flex-basis отива на 0) */ flex: 2 2 10%; /* flex-grow и flex-shrink и flex-basis */ align-self:

Позволява ви да промените свойството align-items само за един елемент.

По подразбиране: от контейнера за подравняване на елементи

• опъвам, разтягам- елементът се разтяга, за да запълни изцяло линията
• гъвкав старт- елементът се притиска към началото на реда
• гъвкав край- елементът е притиснат до края на реда
• център- елементът е подравнен към центъра на линията

базова линия- елементът е подравнен спрямо основната линия на текста

Позволява ви да промените реда (позицията, позицията) на елемент в общия ред.

По подразбиране: ред: 0

По подразбиране елементите имат ред: 0 и се поставят в реда на тяхното появяване в HTML кода и посоката на реда. Но ако промените стойността на свойството ред, тогава елементите ще бъдат подредени в реда на стойностите: -1 0 1 2 3 ... . Например, ако посочите ред: 1 за един от елементите, тогава първо ще бъдат всички нули, а след това елементът с 1.

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

Бележки

Каква е разликата между flex-basis и width?

По-долу са важните разлики между гъвкава основа и ширина/височина:

flex-basis работи само за главната ос. Това означава, че с flex-direction:row flex-basis контролира ширината, а с flex-direction:column контролира височината. .

flex-basis се отнася само за flex елементи. Това означава, че ако деактивирате flex за контейнер, това свойство няма да има ефект.

Елементите на абсолютния контейнер не участват във flex конструкцията... Това означава, че flex-basis не засяга flex елементите на контейнер, ако те са абсолютна позиция:абсолютен. Те ще трябва да посочат ширина/височина.

• Когато използвате свойството flex, 3 стойности (flex-grow/flex-shrink/flex-basis) могат да бъдат комбинирани и написани накратко, но за width grow или shrink трябва да пишете отделно. Например: flex:0 0 50% == width:50%; гъвкаво свиване:0; . Понякога просто е неудобно.

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

Разликата между flex-basis и width - грешка или функция?

Съдържанието вътре във flex елемент го избутва и не може да отиде отвъд него. Ако обаче зададете ширината с помощта на width или max-width вместо flex-basis, тогава елемент вътре във flex контейнер ще може да се простира извън границите на този контейнер (понякога това е точно поведението, което искате). Пример:

Примери за гъвкаво оформление

Никъде в примерите не се използват префикси за съвместимост между различни браузъри. Направих това за лесно четиво css. Затова вижте примери в най-новото версии на Chromeили Firefox.

#1 Прост пример с вертикално и хоризонтално подравняване

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

Или така, без блок вътре:

#1.2 Разделяне (счупване) между гъвкавите блокови елементи

За да позиционирате елементите на контейнера по краищата и произволно да изберете елемент, след който ще има прекъсване, трябва да използвате свойството margin-left:auto или margin-right:auto.

#2 Адаптивно меню на flex

Нека създадем меню в горната част на страницата. На широк екран трябва да е отдясно. Средно подравнете в средата. А на малката всеки елемент трябва да е на нов ред.

#3 Адаптивни 3 колони

Този пример показва как бързо и удобно да направите 3 колони, които при стесняване ще се превърнат в 2 и след това в 1.

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

Отидете на jsfiddle.net и променете ширината на секцията „резултат“.

#4 Адаптивни блокове при огъване

Да кажем, че трябва да изведем 3 блока, един голям и два малки. В същото време е необходимо блоковете да се адаптират към малки екрани. Ние правим:

Отидете на jsfiddle.net и променете ширината на секцията „резултат“.

#5 Галерия с гъвкавост и преход

Този пример показва колко бързо можете да направите сладък акордеон със снимки с помощта на flex. Обърнете внимание на свойството за преход за flex.

#6 Flex to Flex (само пример)

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

За да се реши този проблем, самите блокове се опъват с флекс и се настройват на максималната възможна ширина. Всеки вътрешно тялосъщо е гъвкава конструкция, със завъртяна ос flex-direction:column; и елементът в средата (където е текстът) е разтегнат flex-grow:1; да запълни цялото свободно пространство, така се постига резултата - текстът започва с един ред...

Още примери

Поддръжка на браузър - 98,3%

Разбира се, няма пълна поддръжка, но всички съвременни браузъри поддържат flexbox дизайни. Някои все още изискват префикси. За реална картина, нека погледнем caniuse.com и да видим, че 96,3% от използваните днес браузъри ще работят без префикси, като 98,3% използват префикси. Това е отличен индикатор за уверено използване на flexbox.

За да знам кои префикси са актуални днес (юни 2019 г.), ще дам пример за всички flex правила с с необходимите префикси:

/* Контейнер */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:обвиване на колони; flex-flow:обвиване на колони; -webkit-box-pack:оправяне; -ms-flex-pack:оправяне; обосноваване на съдържание:интервал между; -ms-flex-line-pack: distribute; align-content:space-around; ) /* Елементи */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

По-добре е свойствата с префикси да са преди оригиналното свойство.
Този списък не съдържа префикси, които са ненужни днес (според caniuse), но като цяло има повече префикси.

• (нов) - нов синтаксис: дисплей: flex; .
• (tweener) - стар неофициален синтаксис от 2011 г.: дисплей: flexbox; .
• (стар) - стар синтаксис от 2009 г.: дисплей: кутия;

Видео

Е, не забравяйте за видеото, понякога също е интересно и разбираемо. Ето няколко популярни:

Полезни връзки към Flex

flexboxfroggy.com - flexbox образователна игра.

Flexplorer е визуален създател на гъвкав код.

CSS flexbox (Модул за гъвкаво оформление на кутия)- гъвкав модул за оформление на контейнери - е начин за подреждане на елементи, базиран на идеята за ос.

Flexbox се състои от гъвкав контейнерИ гъвкави елементи. Гъвкавите елементи могат да бъдат подредени в ред или колона, а останалото свободно пространство се разпределя между тях по различни начини.

Модулът flexbox ви позволява да решавате следните задачи:

• Подредете елементите в една от четирите посоки: отляво надясно, отдясно наляво, отгоре надолу или отдолу нагоре.
• Замяна на реда на показване на елементите.
• Автоматично оразмерявайте елементите, така че да се поберат в наличното пространство.
• Решете задачата с хоризонтално и вертикално центриране.
• Преместете елементи вътре в контейнер, без да го препълвате.
• Създайте колони с еднаква височина.
• Създайте притиснат в долната част на страницата.

Flexbox решава специфични проблеми - създаване на едномерни оформления, например лента за навигация, тъй като flex елементите могат да бъдат поставени само по една от осите.

Можете да прочетете списък с текущи проблеми с модула и решения за тях в различни браузъри в статията на Филип Уолтън.

Какво е flexbox

Поддръжка на браузър

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Опера: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Опера мини: 8
Браузър за Android: 4.4, 4.1 -webkit-
Chrome за Android: 44

1. Основни понятия

За описание на модул Flexbox се използва специфичен набор от термини. Стойността на flex-flow и режимът на запис определят съответствието на тези термини с физическите посоки: горе/дясно/долу/ляво, оси: вертикална/хоризонтална и размери: ширина/височина.

Главна ос— оста, по която са разположени гъвкавите елементи. Той се простира в основното измерение.

Основно начало и основен край— линии, които определят началната и крайната страна на гъвкавия контейнер, спрямо които са разположени гъвкавите елементи (започвайки от главното начало към главния край).

Основен размер) - ширината или височината на гъвкавия контейнер или гъвкавите елементи, в зависимост от това кой от тях е в основното измерение, определя основния размер на гъвкавия контейнер или гъвкавия елемент.

Напречна ос- ос, перпендикулярна на главната ос. Разпростира се в напречно измерение.

Напречно начало и напречен край— линии, които определят началната и крайната страна на напречната ос, спрямо която са разположени гъвкавите елементи.

Размер на кръста— широчината или височината на гъвкав контейнер или гъвкави елементи, което от двете е в напречния размер, е техният напречен размер.

2. Гъвкав контейнер

Контейнер Flex задава нов гъвкав контекст на форматиране за своето съдържание. Flex контейнерът не е блоков контейнер, така че CSS свойства като float, clear, vertical-align не работят за дъщерни елементи. Също така, гъвкавият контейнер не се влияе от свойствата column-*, които създават колони в текста и псевдо-елементите::first-line и::first-letter.

Моделът на оформление на flexbox е свързан с определена стойност CSS показва свойства на родителски HTML елемент, съдържащ дъщерни блокове. За да контролирате елементи, използвайки този модел, трябва да зададете свойството display както следва:

Flex-container ( /*генерира гъвкав контейнер на ниво блок*/ дисплей: -webkit-flex; дисплей: flex; ) .flex-контейнер ( /*генерира гъвкав контейнер на ниво линия*/ дисплей: -webkit-inline- flex; дисплей: inline-flex; )

След като зададете стойностите на тези свойства, всеки дъщерен елемент автоматично става гъвкав елемент, подреждайки се в един ред (по главната ос). В този случай блоковите и вградените дъщерни елементи се държат еднакво, т.е. Ширината на блоковете е равна на ширината на тяхното съдържание, като се вземат предвид вътрешните полета и граници на елемента.

Ако родителският блок съдържа текст или изображения без обвивки, те стават анонимни гъвкави елементи. Текстът се подравнява спрямо горния ръб на контейнерния блок и височината на изображението става равна на височината на блока, т.е. тя е деформирана.

3. Гъвкави елементи

Гъвкавите елементи са блокове, които представляват съдържанието на гъвкав контейнер в поток. Контейнерът Flex създава нов контекст на форматиране за своето съдържание, което причинява следните функции:

• За гъвкавите елементи тяхната стойност на свойството за показване е заключена. Показване на стойност: inline-block; и дисплей: таблица-клетка; оценено в дисплей: блок; .
• Бялото пространство между елементите изчезва: той не се превръща в собствен гъвкав елемент, дори ако текстът на междинния елемент е обвит в анонимен гъвкав елемент. Съдържанието на анонимен гъвкав елемент не може да бъде стилизирано, но ще наследи стилове (като опции за шрифт) от гъвкавия контейнер.
• Абсолютно позициониран гъвкав елемент не участва в оформлението на гъвкавото оформление.
• Полетата на съседните гъвкави елементи не се свиват.
• Процентният марж и стойностите на подплънките се изчисляват от вътрешния размер на блока, който ги съдържа.
• марж: авто; разширяване, поглъщайки допълнително пространство в съответното измерение. Те могат да се използват за подравняване или избутване на съседни гъвкави елементи.
• Автоматичен минимален размер flex елементите по подразбиране са с минималния размер на тяхното съдържание, т.е. min-width: auto; . За контейнери с възможност за превъртане автоматичният минимален размер обикновено е нула.

4. Гъвкав ред и ориентация на дисплея на артикула

Съдържанието на гъвкав контейнер може да бъде разположено във всяка посока и в произволен ред (пренареждането на гъвкави елементи в контейнера засяга само визуалното изобразяване).

4.1. Посока на главната ос: flex-direction

Свойството се отнася за гъвкавия контейнер. Управлява посоката на главната ос, по която са подредени flex елементи, в съответствие с текущия режим на писане. Не се предава по наследство.

Синтаксис

Гъвкав контейнер ( дисплей: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; )

4.2. Управление на многоредов гъвкав контейнер: flex-wrap

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

По подразбиране гъвкавите елементи са подредени на една линия по протежение на главната ос. Ако прелеят, те ще се простират отвъд ограничителната кутия на гъвкавия контейнер. Имотът не е наследен.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; -webkit-flex-wrap: обвиване; дисплей: flex; flex-wrap: обвиване; )

4.3. Кратко резюме на посоката и многоредовостта: flex-flow

Свойството ви позволява да дефинирате посоките на главните и напречните оси, както и възможността да премествате гъвкави елементи, ако е необходимо, на няколко линии. Това е съкращение за свойствата flex-direction и flex-wrap. Стойност по подразбиране flex-flow: row nowrap; . имотът не е наследен.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; -webkit-flex-flow: обвиване на редове; дисплей: flex; flex-flow: обвиване на редове; )

4.4. Показване на реда на гъвкавите елементи: ред

Свойството определя реда, в който flex елементите се показват и подреждат в рамките на flex контейнер. Отнася се за гъвкави елементи. Имотът не е наследен.

Първоначално всички гъвкави елементи имат ред: 0; . Когато зададете стойност -1 за елемент, той се премества в началото на времевата линия, а стойност 1 се премества в края. Ако множество гъвкави елементи имат една и съща стойност на поръчката, те ще бъдат изобразени според първоначалната поръчка.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-order: 1; order: 1; )
Ориз. 6. Показване на реда на гъвкавите елементи

5. Гъвкавост на гъвкавите елементи

Определящият аспект на гъвкавото оформление е способността да се "огъват" гъвкави елементи, променяйки тяхната ширина/височина (в зависимост от размера на главната ос), за да запълнят наличното пространство в основното измерение. Това се прави с помощта на свойството flex. Гъвкавият контейнер разпределя свободно пространство между своите деца (пропорционално на тяхното съотношение на гъвкавост и растеж), за да запълни контейнера, или ги свива (пропорционално на тяхното съотношение на гъвкавост и свиване), за да предотврати преливане.

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

5.1. Задаване на гъвкави размери с едно свойство: flex

Свойството е съкратено за свойствата flex-grow, flex-shrink и flex-basis. Стойност по подразбиране: flex: 0 1 auto; . Можете да посочите една или всичките три стойности на свойството. Имотът не е наследен.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Фактор на растеж: flex-grow

Свойството определя скоростта на растеж на един гъвкав елемент спрямо други гъвкави елементи във гъвкавия контейнер при разпределяне на положително свободно пространство. Ако сумата от стойностите на flex-grow на flex елементи в ред е по-малка от 1, те заемат по-малко от 100% от свободното пространство. Имотът не е наследен.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Съотношение на компресия: гъвкаво свиване

Свойството указва съотношението на компресия на гъвкав елемент спрямо други гъвкави елементи при разпределяне на отрицателно свободно пространство. Умножено по размера на гъвкавата основа. Отрицателното пространство се разпределя пропорционално на това колко може да се свие елементът, така че например малък гъвкав елемент няма да се свие до нула, докато по-голям гъвкав елемент не се свие забележимо. Имотът не е наследен.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Основен размер: флекс-основа

Свойството задава първоначалния основен размер на гъвкав елемент, преди да разпредели свободно пространство според факторите на гъвкавост. За всички стойности с изключение на auto и content, основният гъвкав размер се определя по същия начин като ширината в хоризонтални режими на писане. Процентните стойности се дефинират спрямо размера на гъвкавия контейнер и ако не е посочен размер, използваната стойност за гъвкава основа е размерите на неговото съдържание. Не се предава по наследство.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Подравняване

6.1. Подравняване на основната ос: оправдаване на съдържание

Свойството подравнява гъвкавите елементи по главната ос на гъвкавия контейнер, разпределяйки свободното пространство, незаето от гъвкави елементи. Когато даден елемент се преобразува във гъвкав контейнер, гъвкавите елементи се групират заедно по подразбиране (освен ако нямат зададени полета). Пропуските се добавят след изчисляване на стойностите на маржа и flex-grow. Ако някои елементи имат ненулев flex-grow или margin: auto; , собствеността няма да има ефект. Имотът не е наследен.

Синтаксис

Гъвкав контейнер ( дисплей: -webkit-flex; -webkit-justify-content: flex-start; дисплей: flex; justify-content: flex-start; )

6.2. Подравняване на напречната ос: подравняване на елементи и самоподравняване

Гъвкавите елементи могат да бъдат подравнени по напречната ос на текущата линия на гъвкавия контейнер. align-items задава подравняването за всички гъвкави контейнерни елементи, включително анонимни гъвкави елементи. align-self ви позволява да отмените това подравняване за отделни гъвкави елементи. Ако някое от напречните полета на гъвкавия елемент е зададено на auto, самоподравняването няма ефект.

6.2.1. Подравняване на елементи

Свойството подравнява гъвкави елементи, включително анонимни гъвкави елементи, по напречната ос. Не се предава по наследство.

Синтаксис

Гъвкав контейнер ( дисплей: -webkit-flex; -webkit-align-items: flex-start; дисплей: flex; align-items: flex-start; )

6.2.2. Самоподравняване

Свойството е отговорно за подравняването на един гъвкав елемент спрямо височината на гъвкавия контейнер. Заменя подравняването, указано от align-items. Не се предава по наследство.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; дисплей: flex; ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. Подравняване на линиите на гъвкав контейнер: align-content

Свойството подравнява линии във гъвкав контейнер, ако има допълнително пространство по напречната ос, подобно на подравняването отделни елементина главната ос, използвайки свойството justify-content. Свойството не засяга едноредов гъвкав контейнер. Не се предава по наследство.

Синтаксис

Flex-контейнер ( дисплей: -webkit-flex; -webkit-flex-flow: обвиване на редове; -webkit-align-content: flex-end; дисплей: flex; flex-flow: обвиване на редове; align-content: flex-end ; височина: 100px; )

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

Предназначение на CSS Flexbox

CSS Flexbox е за създаване на гъвкави оформления. С помощта на тази технология можете много просто и гъвкаво да подреждате елементи в контейнер, да разпределяте наличното пространство между тях и да ги подравнявате по един или друг начин, дори и да нямат конкретни размери.

CSS Flexbox прави създаването на адаптивен дизайн много по-лесно, отколкото използването на Float и позициониране.

Flexbox може да се използва както за CSS маркиране на цяла страница, така и на нейни отделни блокове.

Поддръжка на браузър за CSS Flexbox

CSS Flexbox се поддържа от всички съвременни браузъри, които се използват в момента (с префикси: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Опера мини, Android 2.1+, Blackberry 7+).

Основи на CSS Flexbox

Създаването на CSS маркиране с помощта на Flexbox започва със задаване на свойството CSS display на необходимия HTML елемент на flex или flex-inline.

След това този елемент става гъвкав контейнер и всички негови директендъщерните елементи са гъвкави елементи. Освен това, когато говорим за flexbox, имаме предвид само елемент с display:flex или display:flex-inline и всички елементи директноразположени в него. По този начин в CSS Flexbox има само два типа елементи: гъвкав контейнер и гъвкав елемент.

Свойствата за префикс и максимална ширина са добавени към CSS, за да поддържат оформлението в повечето браузъри.

За да „превърнете“ блок във гъвкав контейнер, използвайте класа ред. Задаването на ширината на .col__article и .col__aside flex елементи вътре в flex контейнер се извършва с помощта на свойството flex CSS.

Като пример, нека да маркираме друг долен колонтитул с помощта на flexbox и да създадем блок, състоящ се от три елемента в елемента .col__article (минималната ширина на един елемент е 300px). Ще поставим четири блока в долния колонтитул (минималната ширина на един блок е 200px).