Flexbox за интерфейси: основни модели. Отзивчиво меню без Javascript По подразбиране: от контейнер за подравняване на елементи

Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-

Име на иконата:

• карта за пазаруване
• сървър
• отваряне на папка
• вестник-о

CSS стил

След като направихме маркирането, пристъпваме към стилизирането. Отворете style.css в body и задайте фона и шрифта Verdana.

Тяло (фоново изображение: url("../img/escheresque_ste.png"); семейство шрифтове: Verdana; )

Даваме на блока с менюто фон и отстъп отгоре със 100 пиксела. и ширина за запълване на целия екран.

Dws-меню (цвят на фона: бял; поле отгоре: 100px; ширина: 100%; )

В блоковете Ul подреждаме списъците хоризонтално с помощта на desplay:flax, премахваме подложките и центрираме нашите елементи с помощта на justify-content:center.

Ul.dws-ul( дисплей: flex; padding: 0; justify-content: center; )

Премахваме маркера от списъците LI и ги отстъпваме от всички страни с 10 върха.

Li.dws-li ( стил на списък: няма; подложка: 10px; )

Премахнете подчертаването от връзките и увеличете текста до 18 пиксела. и го направи черен.

Li.dws-li a(текстова декорация: няма; размер на шрифта: 18px; цвят: #000; )

Преместете иконата малко надясно, като използвате margin-right:10px.

Li.dws-li a i( margin-right: 10px; )

Анимация при задържане

След като направихме основния дизайн, нека да преминем към анимацията при задържане.

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

Нека опишем лявата страна, изберете връзките и им присвоете псевдо-елемента li.dws-li a::before, напишете празно съдържание:’’; , широк 20 снимки. и височина 3 вр. достатъчно. Нека зададем цвета и за да се появи блокът, задайте позиция: спрямо връзките; , и го позиционирайте абсолютно към връзките, спуснете го до самото дъно, натиснете го към левия ръб.

Li.dws-li a( ... позиция: относителна; ) li.dws-li a::before( ... позиция: абсолютна; горе: 100%; ляво: 0; )

Дублирайте този блок и му присвоете псевдоелемента ::after. Променете левия параметър на десния, изберете различен цвят #ff2117.

Li.dws-li a::after( съдържание: ""; ширина: 20px; височина: 3px; цвят на фона: #ff2117; позиция: абсолютна; горе: 100%; дясно: 0; )

След това правим анимацията при задържане. Изберете li и им дайте малко по-тъмен фон.

Li.dws-li:hover(фонов цвят: #e5eae8; )

За да направите това, изберете списъците при задържане и добавете към тях псевдоелемент с ширина 50% и задайте трансформацията по оста X отляво надясно. Това ще й даде движение.

Li.dws-li:hover a:before( width: 50%; transform: translateX(100%); )

Ще повторим същото нещо за псевдоелемента ::after, само че сега ще зададем движението отдясно наляво.

Li.dws-li:hover a:after(ширина: 50%; трансформация: translateX(-100%); )

Li.dws-li a::before( ... преход: .5s; mix-blend-mode: multiply; ) li.dws-li a::after( ... преход: .5s; mix-blend-mode : умножете; )

Получи се доста добре, нека сега зададем ширината на нула и да добавим червен цвят, когато задържите връзката.

Li.dws-li a:hover( цвят: #e62117; )

Li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... top: 90%; ) li.dws-li a::after( ... top: 90 %;)

Общо взето ви показах каквото исках и се получи доста хубаво меню.

Урокът е подготвен от Денис Горелов.

Накратко, 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 е визуален създател на гъвкав код.

Здравейте всички! В началото на 2018 г., според сайта Мога ли да използвам, оформление на flexbox, се поддържа на 97,8% от браузърите. Това са отлични показатели за тази далеч не нова технология за оформление на уебсайтове. Сега няма причина да не използвате този удобен метод за оформление. Какво ще правим сега?

След като създаде няколко оформления на CSS flexbox, вече не искам да се връщам към остарелите плавами дори до такава любима рамка сред дизайнерите на оформление като Bootstrap. Макар че, BootstrapТвърде рано е да го отпишем, защото използвайки известната му мрежа, не е нужно да се притеснявате за медийни заявки.

В този урок ще проектираме заглавка на уебсайт с типичен адаптивно менюизползвайки flexbox CSSметод.

Заглавката се състои от три логически блока:

1. Лого блок
2. Блок с меню, направено върху списъци
3. Блок с икона и телефонен номер

Тези три блока ще бъдат поставени в обща външна блокова обвивка заглавка, което ще направи в себе си дисплей: гъвкав;за три блока.

Вътре в блока нав, нека го запишем отново дисплей: гъвкав;за елементи от менюто. По този начин ще постигнем гъвкавост, когато размерът на екрана е намален, елементите от менюто могат да бъдат подредени един под друг.

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

+380973457685

Ето как ще изглежда шапката без използване на стилове, така трябва да бъде.

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

Заглавка (
дисплей: гъвкав;
}

Заглавка .menu ul (
дисплей: гъвкав;
}

Ето как работи flexbox.

тяло (
цвят на фона: #fff;
семейство шрифтове: "Open Sans", sans serif;
височина на линията: 1,5;
}

Заглавка (
рамка: 2px плътен #ccc;
дисплей: гъвкав;
flex-wrap: обвивка; /*нов ред */
justify-content: интервал между; /*притиска съдържанието към ръбовете */
подравняване на елементи: център; /*подравнява елементите вертикално центрирани */
}

Header.logo (
padding-left: 30px;
}

Заглавка .menu ul (
дисплей: гъвкав;
стил на списък: няма;
}

Заглавка .menu ul li (
поле: 20px 10px;
}

Заглавие .menu ul a (
преобразуване на текст: главни букви;
текст-декорация: няма;
тегло на шрифта: удебелен;
цвят: #06a327;
}

телефон (
размер на шрифта: 110%;
цвят: #333;
padding-right: 40px;
}

Работим върху адаптивността на хедъра

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

Например, при широчина на екрана от 900 пиксела, блокът с телефона се притиска към левия край на заглавката.

В този брой ще направим хоризонтално меню с ефектпри задържане. Нека свържем иконите на шрифта, активираме режима на смесване на слоеве с помощта на mix-blend-mode: multiply, използваме псевдо-класовете :hover и се запознаем с desplay:flax, всичко това направено в чист CSS3.

Рамка на менюто в HTML

Изтеглете архива на вашия компютър и го разархивирайте. Съдържа три папки, css където са стиловите файлове, папка fonts с икони, img в нея е картинка за фон.

Преместете всичко във вашата среда за разработка, където работите. Ще напиша целия код в phpstorm. Копирам всички папки и файлове в него, отварям index.html и нека започнем да описваме рамката на менюто.

Пишем етикета на тялото