Сложни оформления, използващи flex css примери. Какво е Flexbox? Описание на всички свойства на css, основни принципи, предимства и недостатъци
Flexbox е идеален за създаване на често използвани оформления на уебсайтове, като например оформлението с три колони, така нареченото „Светия Граал“, където всички колони трябва да заемат пълна височина, независимо от тяхното съдържание. В същото време, в програмен кодосновното съдържание идва преди навигацията, а на самата страница основното съдържание идва след навигацията.
Като този.
Преди появата на flexbox, този вид оформление беше доста трудно да се получи, без да се използва някакъв вид хак. Разработчиците често трябваше да правят неща като добавяне на допълнително маркиране, прилагане на отрицателни полета и други трикове, за да накарат всичко да се подреди правилно, независимо от количеството съдържание или размера на екрана. Но, както показва примерът по-горе, във flexbox всичко е много по-просто.
Ето обобщение на кода. В този пример правим елемента #main гъвкав контейнер, като оставяме горния и долния колонтитул като елементи на ниво блок. С други думи, само средната част става flexbox. Ето един фрагмент, който го прави гъвкав контейнер.
#main (дисплей: flex; min-height: calc(100vh - 40vh); )
Ние просто използваме display: flex, за да направим гъвкав контейнер. Забележете, че също задаваме стойността на минималната височина с функцията calc() и задаваме #main на 100% от височината на прозореца за изглед минусвисочината на капачката и мазето (по 20vh). Това гарантира, че оформлението ще заеме цялата височина на екрана, дори ако има малко съдържание. В резултат на това долният колонтитул никога няма да се повдигне и да остави празно пространство под него, ако съдържанието заема по-малко от височината на екрана.
Изчисляването на минималната височина беше достатъчно лесно, като се има предвид, че приложихме box-sizing: border-box към всички елементи. Ако не сме го направили, тогава ще трябва да добавим стойността на подплънката към извадената сума.
След инсталирането на гъвкавия контейнер имаме работа с гъвкави елементи.
#main > article (flex: 1;) #main > nav, #main > aside (flex: 0 0 20vw; background: beige;) #main > nav (order: -1;)
Свойството flex е съкратено за свойствата flex-grow, flex-shrink и flex-basis. В първия случай ние записахме само една стойност, така че flex задава свойството flex-grow. Във втория случай написахме и трите стойности за
Свойството align-content задава типа на подравняване на линиите вътре във гъвкавия контейнер по напречната ос, когато има свободно пространство.
Отнася се за: гъвкав контейнер.
Стойност по подразбиране: опъвам, разтягам.
Линиите за гъвкав старт са разположени в началото на напречната ос. Всеки следващ ред се изравнява с предишния. flex-end Линиите се поставят, започвайки от края на напречната ос. Всеки предишен ред се изравнява със следващия. център Линиите се поставят в центъра на контейнера. space-between Линиите са равномерно разпределени в контейнера и разстоянието между тях е еднакво. space-around Линиите се разпределят равномерно, така че разстоянието между две съседни линии да е еднакво. Бялото пространство преди първия ред и след последния ред е равно на половината от разстоянието между два съседни реда. space-evenly Редовете се разпределят равномерно. Бялото пространство преди първия ред и след последния ред е със същата ширина като другите редове. разтягане Линиите се разтягат равномерно, за да запълнят свободното пространство.
Свойството align-content подравнява линиите на гъвкавия контейнер в рамките на гъвкавия контейнер, когато има допълнително пространство в напречната ос, подобно на това как justify-content подравнява отделни елементи в рамките на главната ос. Обърнете внимание, че това свойство няма ефект върху едноредов гъвкав контейнер. Стойностите имат следните значения:
Забележка: Само многоредовите гъвкави контейнери някога имат свободно пространство в напречната ос за линии, които да бъдат подравнени, тъй като в едноредов гъвкав контейнер единствената линия автоматично се разтяга, за да запълни пространството.
Отнася се за: гъвкави контейнери.
Първоначално: опъвам, разтягам.
Линиите за гъвкаво начало са опаковани към началото на гъвкавия контейнер. Напречният начален ръб на първата линия във гъвкавия контейнер се поставя изравнен с напречния начален ръб на гъвкавия контейнер и всяка следваща линия се поставя наравно с предходната линия. flex-end Линиите са опаковани към края на гъвкавия контейнер. Крайният напречен ръб на последната линия се поставя наравно с ръба на напречния край на гъвкавия контейнер и всяка предходна линия се поставя наравно със следващата линия. централните линии са опаковани към центъра на гъвкавия контейнер. Линиите във гъвкавия контейнер са поставени една на друга и са подравнени в центъра на гъвкавия контейнер, с равни количества пространство между ръба на кръстосаното начално съдържание на гъвкавия контейнер и първия ред в гъвкавия контейнер, както и между кръстосано крайно съдържание на гъвкавия контейнер и последния ред във гъвкавия контейнер. (Ако остатъчното свободно пространство е отрицателно, линиите ще препълват еднакво и в двете посоки.) пространство между линиите са равномерно разпределени във гъвкавия контейнер. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична на flex-start. В противен случай напречният начален ръб на първия ред във гъвкавия контейнер се поставя наравно с напречния начален ръб на съдържанието на гъвкавия контейнер, напречният край на последния ред във гъвкавия контейнер се поставя наравно с напречния ръба на крайното съдържание на гъвкавия контейнер, а останалите линии във гъвкавия контейнер са разпределени така, че разстоянието между всеки два съседни реда да е еднакво. space-around Линиите са равномерно разпределени във гъвкавия контейнер, с половин размер пространства от двата края. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична с центъра. В противен случай линиите във гъвкавия контейнер са разпределени така, че разстоянието между всеки две съседни линии е еднакво, а разстоянието между първите/последните редове и краищата на гъвкавия контейнер е половината от размера на разстоянието между гъвкавите линии. space-evenly Линиите са равномерно разпределени във гъвкавия контейнер. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична с центъра. В противен случай линиите във гъвкавия контейнер са разпределени така, че разстоянието между всяка гъвкава линия е еднакво. разтягане Линиите се разтягат, за да заемат оставащото пространство. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична на flex-start. В противен случай свободното пространство се разделя поравно между всички линии, увеличавайки техния напречен размер.
Като използвам примерна форма от реална тестова задача, ще ви покажа как да набирате според BEMизползвайки flexbox. Питате: „Защо е необходимо да се набира според BEM + Flexbox?" Това изискване идва от работодателя. Цитат от ТЗ: "Опитайте се да пишете без рамки (за предпочитане на flexbox), просто и ясно: избягвайте тромави конструкции и допълнителен код, използвайте методологията BEM."
Фрагмент от оформление на раздел с формуляр
Моите правила за оформление
- Разделете оформлението на логически секции
- Започнете всеки раздел с етикет раздел
- отделни секции и cssразделен, празен низ
- Задайте клас на всеки таг
- Името на класа за блока или елемента отговаря на въпроса - Какво е това?
- Името на модификатора отговаря на въпроса - Който?
HTML маркиране
Първо, правя маркиране, определям влагането на блокове и измислям имена за класовете. В кода по-долу имаме два вградени тагова - h2И вход. Вградените етикети са главоболие и източник на стрес за начинаещите дизайнери на оформление. Защо? Те се държат много зле - опитват се да заемат цялата налична ширина, не ви позволяват да зададете цвета на фона и размера на целия блок.
лична информация
Какво прави лош кодер в този случай? Той обгръща вградени елементи в блокови тагове диви задава всички необходими свойства на етикета за обвивка. Дъщерните вградени елементи наследяват тези свойства. Струва ли си да оградите градина от излишния код? Как ще действа един компетентен дизайнер на оформление? Той ще предефинира вграден елемент за блокиране или вграден блок cssправила.
дисплей:блок; // за тага за въвеждане
дисплей: inline-block // за h2 таг
Логика на влагане и имена на блокове
Виждаме раздел с лична информация, така че наричаме раздела клас - инфо. Разделът се състои от три дъщерни елемента:
Икона // име на клас info__icon
заглавие // информация__заглавие
форма // info_form
Същността на името на класа BEM, се състои в това, че дъщерният елемент принадлежи на родителя. Не може да се наименува елемент икона. Това не е просто някаква икона, а икона от секцията инфо.
Дъщеря и родител в едно лице
Блокирайте info_form, имаме специален - той е вложен в секцията инфо, но в същото време съдържа полета на формуляр. Името на това явление е многостепенно гнездене. Блокът с формуляра носи чисто обвиваща функция за входовете, така че можете лесно да зададете външните отстъпи. В края на краищата въведените с малки букви се държат като деца (които са), те изобщо не се подчиняват. Освен това вторият вход е по-къс от всички останали и се различава само по ширина.
Задаваме един клас за всички входове с еднакви свойства, с изключение на ширината - info_input. Обикновени входове, добавете модификатор info_input_long, и кратък вход - модификатор info_input_short. Нека ви напомня, че модификаторът BEMтрябва да отговори на въпроса - Който?
CSS правила за модификатори
.info__input_long(ширина: 520px
}
info__input_short(
ширина: 320px
}
CSS код
IN HTMLмаркирането създава груба структура на сайта, в css, вече поставяме елементите според оформлението. Днес няма да засягаме външния вид, а ще се съсредоточим върху позиционирането на елементите. В нашия раздел има два гъвкави контейнера. Трябва да кажа, че използването на флекси, с подреждането на всички елементи по един на ред, е много съмнително. Единствената полза, която получавате, е собствеността justify-content, централно подравняване, гъвкави елементи. Мога да кажа в своя защита, че идеята с флексовете е безсмислена, в контекста само на този раздел. Истинското оформление за оформление обикновено има повече разнообразие.
инфо(
дисплей: гъвкав;
justify-content: център;
подравняване на елементи: център;
flex-direction: колона;
margin-top: 77px;
височина: 100%;
}
info_form(
дисплей: гъвкав;
justify-content: център;
flex-direction: колона;
височина: 100%;
margin-top: 50px;
Flexbox с право може да се нарече успешен опит за решаване на огромен набор от проблеми при изграждането на оформления в css. Но преди да преминем към неговото описание, нека да разберем какво не е наред с методите за оформление, които използваме сега?
Всяка пишеща машина знае няколко начина да подравни нещо вертикално или да направи оформление с 3 колони с гумена средна колона. Но нека признаем, че всички тези методи са доста странни, изглеждат като хак, не са подходящи във всички случаи, трудни са за разбиране и не работят, ако не са изпълнени определени магически условия, които са се развили исторически.
Това се случи, защото html и css се развиха еволюционно. В началото уеб страниците изглеждаха като еднонишкови текстови документи, малко по-късно страницата беше разделена на блокове с таблици, след това стана модерно да се пише с float, а след официалната смърт на ie6 бяха добавени inline-block трикове. В резултат на това наследихме експлозивна смес от всички тези техники, използвани за изграждане на оформления за 99,9% от всички съществуващи уеб страници.
Многоредова организация на блокове във гъвкав контейнер.
гъвкава обвивка
Всички примери, които дадохме по-горе, са построени, като се вземе предвид едноредовото (едноколонно) подреждане на блокове. Трябва да кажа, че по подразбиране flex контейнерът винаги ще поставя блоковете вътре в него в един ред. Спецификацията обаче поддържа и многоредов режим. CSS свойството flex-wrap е отговорно за многоредовия вътре в flex контейнер.
Налични стойности гъвкава обвивка:
- Nowrap (стойност по подразбиране): блоковете са подредени в един ред отляво надясно (в rtl отдясно наляво)
- обвиване: блоковете се подреждат в няколко хоризонтални реда (ако не се побират в един ред). Те следват един друг от ляво на дясно (в rtl от дясно на ляво)
- wrap-reverse: същото като обвивам, но блоковете са в обратен ред.
flex-flow е удобна стенограма за flex-direction + flex-wrap
Всъщност flex-flow предоставя възможността да се опише посоката на главната и мултилинията на напречната ос в едно свойство. По подразбиране flex-flow: row nowrap.
гъвкав поток:<‘flex-direction’> || <‘flex-wrap’>
css
/* т.е. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* това е същото като... */ .my-flex-block( flex-flow: column wrap ;)подравнете съдържанието
Има и свойството align-content, което определя как получените редове от блокове ще бъдат подравнени вертикално и как ще споделят цялото пространство на flex контейнера.
Важно: align-content работи само в многоредов режим (т.е. в случай на flex-wrap:wrap; или flex-wrap:wrap-reverse;)
Налични стойности подравнете съдържанието:
- flex-start: редове от блокове се избутват до началото на гъвкавия контейнер.
- flex-end: редове от блокове се избутват до края на гъвкавия контейнер
- център: редовете от блокове са в центъра на гъвкавия контейнер
- интервал между: първият ред блокове се намира в началото на гъвкавия контейнер, последният ред блокове е блокът в края, всички останали редове са равномерно разпределени в оставащото пространство.
- space-around: Редиците от блокове са равномерно разположени от началото до края на гъвкавия контейнер, разделяйки поравно цялото свободно пространство.
- опъвам, разтягам (стойност по подразбиране): Редовете от блокове се разтягат, за да заемат цялото налично пространство.
CSS свойствата flex-wrap и align-content трябва да се прилагат директно към flex контейнера, а не към неговите деца.
Демонстрация на многоредови свойства във flex
CSS правила за дъщерни елементи на гъвкав контейнер (гъвкави блокове)
flex-basis - основният размер на единичен flex блок
Задава първоначалния размер на главната ос за гъвкава кутия, преди да бъдат приложени трансформации, базирани на други фактори на гъвкавост. Може да се зададе във всяка единица за дължина (px, em, %, ...) или автоматично (по подразбиране). Ако е зададено на автоматично, размерите на блока (ширина, височина) се приемат като основа, което от своя страна може да зависи от размера на съдържанието, ако не е изрично посочено.
flex-grow - "алчност" на единичен flex блок
Определя колко отделна гъвкава кутия може да бъде по-голяма от съседните елементи, ако е необходимо. flex-grow приема безразмерна стойност (по подразбиране 0)
Пример 1:
- Ако всички гъвкави кутии във гъвкав контейнер имат flex-grow:1, тогава те ще бъдат с еднакъв размер
- Ако един от тях има flex-grow:2, тогава той ще бъде 2 пъти по-голям от всички останали
Пример 2:
- Ако всички гъвкави кутии във гъвкав контейнер имат flex-grow:3, тогава те ще бъдат с еднакъв размер
- Ако един от тях има flex-grow:12, тогава той ще бъде 4 пъти по-голям от всички останали
Тоест абсолютната стойност на flex-grow не определя точната ширина. Той определя неговата степен на „алчност“ по отношение на други гъвкави блокове от същото ниво.
flex-shrink - факторът "свиваемост" на единичен гъвкав блок
Определя колко ще се свие гъвкавата кутия спрямо съседните елементи вътре в гъвкавия контейнер, ако няма достатъчно свободно пространство. По подразбиране е 1.
flex - съкращение за свойствата flex-grow, flex-shrink и flex-basis
flex: няма | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
css
/* т.е. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basis: 30em; ) /* това е същото като... */ .my-flex-block( flex : 12 3 30ем; )Демо за flex-grow, flex-shrink и flex-basis
align-self - подравняване на единичен гъвкав блок по напречната ос.
Прави възможно да се замени свойството align-items на гъвкав контейнер за отделна гъвкава кутия.
Налични стойности за самоподравняване (същите 5 опции като за подравняване на елементи)
- flex-start: гъвкавата кутия се притиска към началото на напречната ос
- гъвкав край: гъвкавата кутия се избутва до края на напречната ос
- център: гъвкавата кутия е поставена в центъра на напречната ос
- базова линия: гъвкава кутия, подравнена спрямо основната линия
- опъвам, разтягам (стойност по подразбиране): Гъвкавата кутия е разтегната, за да заеме цялото налично пространство по напречната ос, като се вземат предвид минималната/максималната ширина, ако има такава.
ред - редът на единичен гъвкав блок вътре във гъвкавия контейнер.
По подразбиране всички блокове ще следват един след друг в реда, даден в html. Този ред обаче може да бъде променен с помощта на свойството order. Посочено е като цяло число и по подразбиране е 0.
Стойността на поръчката не уточнява абсолютната позиция на елемента в последователността. Той определя тежестта на позицията на елемента.
HTML
В този случай блоковете ще следват един след друг по главната ос в следния ред: елемент5, елемент1, елемент3, елемент4, елемент2
Демо за подравняване и подреждане
марж: авто вертикално. Мечтите се сбъдват!
Flexbox може да бъде обичан поне заради факта, че хоризонталното подравняване, познато на всички чрез margin: auto, работи тук и за вертикала!
My-flex-container ( display: flex; height: 300px; /* Или каквото и да е */ ) .my-flex-block ( width: 100px; /* Или каквото и да е */ height: 100px; /* Или каквото и да е * / margin: auto; /* Магия! Кутията е центрирана вертикално и хоризонтално! */ )
Неща, които трябва да запомните
- Не трябва да използвате flexbox там, където не е необходимо.
- В много случаи все още е полезно дефинирането на региони и пренареждането на съдържанието да зависи от структурата на страницата. Обмислете го.
- Разберете flexbox и знайте основите. Това значително улеснява постигането на очаквания резултат.
- Не забравяйте за маржовете. Те се вземат предвид при настройката на центровката на оста. Също така е важно да запомните, че полетата на flexbox не се „свиват“, както се случва в нормалния поток.
- Плаващата стойност на гъвкавите блокове не се взема предвид и няма значение. Вероятно това по някакъв начин може да се използва за грациозна деградация при преминаване към flexbox.
- flexbox е много подходящ за оформяне на уеб компоненти и отделни части от уеб страници, но не се представи добре при оформяне на основни оформления (позиция на статия, горен колонтитул, долен колонтитул, навигационна лента и т.н.). Все още е спорен въпрос, но тази статия показва недостатъците доста убедително xanthir.com/blog/b4580
Накрая
Мисля, че flexbox, разбира се, няма да измести всички други методи за оформление, но, разбира се, в близко бъдеще ще заеме достойна ниша в решаването на огромен брой задачи. И със сигурност трябва да опитате да работите с него сега. Една от следващите статии ще бъде посветена на конкретни примериработа с гъвкаво оформление. Абонирайте се за новини;)
Нищо не стои неподвижно, технологиите и стандартите се развиват, появяват се нови техники и методи за оформление на сайта, например оформление с таблични елементи, които не разгледахме обективни причинибеше заменен от плаващи елементи на оформлението.
Много редактори на код имат удобен плъгин за маркиране на Emmet, вграден по подразбиране или достъпен за изтегляне, който ви позволява да направите основното маркиране на този пример, както следва: раздел>div*3>lorem+ Tab (стойност loremгенерира текста, показан на изображението по-долу).
Обърнете внимание, че с малко усилия успяхме да накараме колоните ни за оформление да са с еднаква височина, независимо от това как са били запълнени със съдържание, което е страхотно. Елементи
не са гъвкави елементи по подразбиране и се намират в потока третиелемент
Резултатът от нашия пример:
Вграден гъвкав контейнер
По аналогия с блоковите елементи, гъвкавите контейнери могат да бъдат вградени. Нека да разгледаме разликата между вградените гъвкави контейнери и блоковите гъвкави контейнери. В предишния пример разгледахме използването на блоков контейнер, точно като нормален блоков елемент, той заема цялата ширина на екрана и се държи като нормален елемент на ниво блок. Що се отнася до вградените гъвкави контейнери, те стават нормални вградени елементи, като същевременно запазват гъвкавостта на елемента.
В следващия пример ще разгледаме тази разлика, тъй като предишният пример не би бил представителен, поради причината, че дъщерните гъвкави елементи не бяха изрично оразмерени и в резултат на това нашият контейнер, независимо дали е вграден или блок, ще се държат по същия начин и заемат цялата ширина на екрана.
В този пример сме поставили двемалка буква и двеблок флекс контейнери, вътре в които поставихме петелементи
За бързо генериране на подобно оформление с помощта на Еметвъведете следното в редактора: div.inline-flex*2>div*5 + Tab и направете същото с друг клас div.flex*2>div*5 + Tab.
Разгледайте изхода от нашия пример, разликата между вградените и блоковите гъвкави контейнери вече трябва да е очевидна за вас. Вграденият контейнер се държи като вграден елемент и заема ширината, изисквана само от неговите гъвкави деца, докато блоковият гъвкав контейнер, независимо от размера на неговите гъвкави деца, заема цялата ширина на екрана.
Резултатът от нашия пример:
Ориз. 205 Пример за разликата между inline-flex контейнери и flex контейнери.
Посока? Коя посока?
Посоката на гъвкавите елементи се формира въз основа на позицията на две оси: главна осконтейнер flex и неговите напречна ос, който винаги се намира перпендикулярна на основната. Главна ос в посока ltr (глобална HTML атрибут dir или свойството CSS посока със стойност ltr) е отляво надясно, а напречното е отгоре надолу (това е стойността по подразбиране), съответно за rtl стойността е огледално.