Гъвкава кутия или накратко Flexbox е набор от свойства в CSS, въведени през 2009 г., за да осигурят нова, изключителна система за оформление. Модулът Flexbox е идентифициран като част от третата версия на CSS (CSS3).

Вероятно вече използвате много от новите свойства в CSS3, като box-shadow, border-radius, фонови градиенти , и така нататък. Flexbox обаче все още не е видял широкото приемане, което заслужава. Това може да се дължи на всички разрушителни промени, които е претърпял през годините, или защото се поддържа само частично в Internet Explorer 10 или просто защото Flexbox е цяла екосистема, докато предишните парадигми са били предимно базирани на единични, готови за go свойства.

node js рамка за пълен стек

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

Тази статия ще ви преведе през основите на Flexbox и как можете да го използвате, за да постигнете някои наистина страхотни оформления, които иначе биха изисквали сложни CSS хакове или дори JavaScript.

Защо да използвам Flexbox?

По подразбиране елементите на ниво блок на HTML се стекат, така че ако искате да ги подравните в ред, трябва да разчитате на CSS свойства като float или да манипулирате display свойство с настройки за таблица или вграден блок.

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

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

Въведете Flexbox!

С просто правило, приложено към родителски елемент, можете лесно да контролирате поведението на оформлението на всички негови деца.

С Flexbox можете:

• Обърнете реда на елементите в родител на Flexbox.
• Увийте дъщерни елементи в колони (броят на колоните може да варира в зависимост от височината на детето и родителя).
• Посочете скоростта, с която елементите растат или се свиват, докато размерът на прозореца се променя.
• Контролирайте дали елементите са свиваеми или не, независимо от посочения тип единица за ширина (относителна или абсолютна).
• Променете реда на елементите с CSS (комбинирайте това с медийни заявки и ще откриете неограничени възможности във вашия поток).
• Генерирайте сложни разпределения на елементите, които да бъдат на еднакво разстояние от пространството около или само пространството между тях.
• Генерирайте 'отстъпнически' елементи, които протичат по различен начин (всеки отляво, но един отдясно, отгоре / отдолу ... това е вашето обаждане).
• И, най-важното, избягвайте хакът с ясни корекции за добро!

Разбирам, че Flexbox може да е труден в началото. Мисля, че е по-лесно да се научат десет несвързани CSS свойства, отколкото пет с някаква взаимозависимост. Въпреки това, с вашите текущи CSS умения и може би малко помощ от тази статия, вие ще стартирате в нова CSS вселена.

Основите на Flexbox

Дисплей

display е едно от най-основните свойства в CSS и е доста важно в контекста на Flexbox, тъй като се използва за дефиниране на гъвкава обвивка.

Има две възможни стойности на гъвкава обвивка: flex и inline-flex.

Разликата между двете е, че a display: flex обвивката действа като блоков елемент, докато display: inline-flex обвивката действа като вграден блок. Също така, inline-flex елементите растат, ако няма достатъчно място за задържане на децата. Но освен тези различия, поведението на двамата би било същото.

Опитайте примерния код по-долу, намалете ширината на прозореца, когато е активен inline-flex и ... превъртете.

Вижте писалката Flexbox @ApeeScape - родител - свойство `display` от DD ( @Diegue ) На CodePen .

.wrapper inline-flex;

Flex посока

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

• ред (по подразбиране): Подрежда елементите отляво надясно (но ако е зададен RTL, това ще бъде назад).
• обратен ред: Обръща реда на елементите в разположение на редове
• колона: Подрежда елементите отгоре надолу
• обратна колона: Обръща реда на елементите в колона

Съвет: column и column-reverse стойности могат да се използват за смяна на осите, така че свойствата, които биха повлияли на хоризонталната ос, биха повлияли на вертикалната ос.

Вижте писалката Flexbox @ApeeScape - родител - свойство `flex-direction` от DD ( @Diegue ) На CodePen .

.wrapper row-reverse

Flex Wrap

Ако проверите първата извадка на код, ще разберете, че дъщерните елементи не се натрупват по подразбиране в гъвкава обвивка. Тук е flex-wrap влиза в игра:

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

Вижте писалката Flexbox @ApeeScape - Родител - свойство `flex-wrap` от DD ( @Diegue ) На CodePen .

.wrapper wrap-reverse;

Flex Flow

Можете да комбинирате flex-direction и flex-wrap свойства в едно свойство: flex-flow.

.wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Обосновете съдържанието

Това свойство се използва за управление на хоризонталното подравняване на дъщерните елементи:

• гъвкав старт (по подразбиране): Елементите са подравнени вляво (подобно на вградените елементи с text-align: left)
• гъвкав край: Елементите са подравнени вдясно (подобно на вградените елементи с text-align: right)
• център: Елементите са центрирани (подобно на вградените елементи с text-align: center)
• пространство наоколо (където магията започва): Всеки елемент ще бъде изобразен със същото количество пространство около всеки елемент. Обърнете внимание, че пространството между два последователни дъщерни елемента ще бъде удвоено пространството между най-външните елементи и страните на обвивката.
• интервал между: Точно като space-around, с изключение на това, че елементите ще бъдат разделени на същото разстояние и ще има не пространство близо до двата края на обвивката.

Забележка: Запомнете flex-direction, когато е зададено на column или column-reverse, размества оста. Ако е зададено едно от тях, justify-content ще повлияе на вертикалното подравняване, а не на хоризонталното.

Вижте писалката Flexbox @ApeeScape - родител - свойство `justify-content` от DD ( @Diegue ) На CodePen .

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

Това свойство е подобно на justify-content но контекстът на неговите ефекти са редовете вместо самата обвивка:

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

Вижте писалката Flexbox @ApeeScape - Родител - свойство `align-items` от DD ( @Diegue ) На CodePen .

Подравняване на съдържанието

Това свойство е подобно на justify-content и align-items но работи във вертикалната ос и контекстът е цялата обвивка (не редът като предишния пример). За да видите ефектите му, ще ви трябват повече от един ред:

• гъвкав старт: Редовете са вертикално подравнени към върха (т.е. подредени от горната част на обвивката).
• гъвкав край: Редовете са вертикално подравнени към дъното (т.е. подредени от дъното на обвивката).
• център: Редовете са центрирани в обвивката вертикално.
• опъвам, разтягам (по подразбиране): Като цяло това свойство разтяга елементите, за да използва цялата вертикална височина на обвивката. Ако обаче сте задали някаква специфична височина на елементите, тази височина ще бъде спазена и оставащото вертикално пространство (в този ред, под този елемент) ще бъде празно.
• пространство наоколо: Всеки ред ще бъде изобразен със същото количество пространство около себе си вертикално (т.е. под и над себе си). Обърнете внимание, че интервалът между два реда ще бъде удвоен пространството между горния и долния ред и ръбовете на обвивката.
• интервал между: Точно като space-around, с изключение на това, че елементите ще бъдат разделени на еднакво разстояние и няма да има място в горния и долния ръб на обвивката.

Вижте писалката Flexbox @ApeeScape - Родител - свойство `align-content` от DD ( @Diegue ) На CodePen .

Flex Grow

Това свойство задава относителния дял от наличното пространство, което елементът трябва да използва. Стойността трябва да е цяло число, където 0 е по подразбиране.

Да предположим, че имате два различни елемента в една и съща гъвкава обвивка. Ако и двете имат flex-grow на стойност 1, те ще растат еднакво, за да споделят наличното пространство. Но ако някой a flex-grow стойност 1, а другата a flex-grow стойност 2, както е показано в примера по-долу, този с flex-grow стойност 2 ще нарасне, за да заеме два пъти повече място от първата.

как да проектирам shopify уебсайт

.wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

Вижте писалката Flexbox @ApeeScape - Деца - свойство `flex-grow` от DD ( @Diegue ) На CodePen .

Flex Свиване

Подобно на flex-grow, това свойство задава дали елементът е „свиваем“ или не с целочислена стойност. Подобно на flex-grow, flex-shrink указва коефициента на свиване на гъвкавия елемент.

Вижте писалката Flexbox @ApeeScape - Деца - свойство `flex-shrink` от DD ( @Diegue ) На CodePen .

.wrapper .element { flex-shrink: 1; /* Default 0 */ }

Flex Основа

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

Подсказка: flex-basis не поддържа calc() и box-sizing: border-box във всеки браузър, затова препоръчвам да използвате width ако трябва да използвате един от тях (имайте предвид, че ще трябва да зададете и flex-basis: auto;).

Вижте писалката Flexbox @ApeeScape - Деца - свойство `flex-basis` от DD ( @Diegue ) На CodePen .

.wrapper .element

Flex

Можете да комбинирате flex-grow, flex-shrink и flex-basis свойства в едно свойство: flex както следва:

.wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

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

Подравнете себе си

Това свойство е подобно на align-items но ефектът се прилага индивидуално за всеки елемент. Възможните стойности са:

• гъвкав старт: Вертикално подравнява елемента към горната част на обвивката.
• гъвкав край: Вертикално подравнява елемента към дъното на обвивката.
• център: Вертикално центрира елемента в обвивката (най-накрая лесен начин да постигнете това!).
• опъвам, разтягам (по подразбиране): Разтяга елемента, за да заеме цялата височина на обвивката (когато е приложена към ред) или пълната ширина на обвивката (когато е приложена към колона).
• изходно ниво: Подравнява елементите според действителните им базови линии.

Вижте писалката Flexbox @ApeeScape - Деца - свойство `align-self` от DD ( @Diegue ) На CodePen .

Поръчка

Едно от най-добрите неща, включени във Flexbox, е възможността да пренареждате елементи (използвайки свойството order), без да е необходимо да модифицирате DOM или да използвате JavaScript. Начинът, по който order свойството работи е супер просто. По същия начин, по който z-index контролира реда, в който се показват елементите, order контролира реда, в който елементите са разположени в обвивката; тоест елементи с по-нисък order стойност (която между другото може да бъде и отрицателна) се позиционират преди тези с по-висока order стойност.

Вижте писалката Flexbox @ApeeScape - Деца - свойство `поръчка` от DD ( @Diegue ) На CodePen .

.wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Сглобяване на всички заедно: Примери за използване на Flexbox

Що се отнася до проектирането на оформления, Flexbox разкрива свят от възможности. По-долу можете да намерите някои примерни приложения на свойствата на Flexbox.

Компонент за вертикално подравняване

С Flexbox можете да подравнявате всичко вертикално, включително няколко елемента наведнъж. Без Flexbox трябваше да използвате техники за позициониране или таблица, които изискват да създадем едно дете, което да съдържа множество елементи. Но с Flexbox можете да оставите тези досадни и крехки техники и просто да дефинирате няколко свойства в обвивката и това е всичко, независимо колко пъти се променя съдържанието в контейнера или вида на промяната!

.wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

Вижте писалката Flexbox @ApeeScape - Реални приложения, които можем да дадем - Вертикално подравняване от DD ( @Diegue ) На CodePen .

Половин / половин оформление

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

Използвайки по-традиционни техники, можете да създадете това оформление с плаващи елементи (с ширина 50% всеки), като изчистите плувките в обвивката („clearfix“ :before и :after, overflow: hidden или whackywith clear: both; в края). И все пак това е много работа и резултатът не е толкова стабилен, колкото предоставя Flexbox.

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

Външна обвивка:

.wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Вътрешни обвивки:

.inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

Вижте писалката Flexbox @ApeeScape - Реални приложения, които можем да дадем - Раздел с полукръвни от DD ( @Diegue ) На CodePen .

Бутони Navbar с пълна ширина

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

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

къде да науча C програмиране

Flexbox прави това много по-просто.

Свойства на обвивката:

.navbar { display: flex; }

Обхващащи детски свойства:

.navbar-item { flex-grow: 1; /* They will grow */ }

Необхватни дъщерни свойства:

.navbar-other { flex-grow: 0; // They won’t grow }

Вижте писалката Flexbox @ApeeScape - Реални приложения, които можем да дадем - Навигационна лента с пълни кръвопролитни бутони от DD ( @Diegue ) На CodePen .

Blurbs

Колко пъти трябваше да внедрите набор от информационни полета с икони и текст в различни проекти?

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

Свойства на обвивката:

.wrapper { display: flex; flex-wrap: wrap; }

Детски свойства:

.blurb { flex-grow: 0; /* elements don’t grow */ flex-shrink: 0; /* elements don’t shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

За екрани за преглед на таблети и мобилни устройства ширината варира между 50% и 100%.

Вижте писалката Flexbox @ApeeScape - Реални приложения, които можем да дадем - Blurbs от DD ( @Diegue ) На CodePen .

Подобряване на съвместимостта на различни браузъри

Синтаксисът за Flexbox се е променял многократно в различните версии на браузъра. Това може да е проблем, когато внедрявате оформление с Flexbox и се опитвате да поддържате по-стари уеб браузъри, особено по-стари версии на Internet Explorer.

За щастие са изброени много техники и заобикалящи решения, за да накарате кода си да работи в най-широкия диапазон от уеб браузъри Flexbugs , което е чудесен ресурс. Ако следвате информацията на този сайт, ще имате по-добри, последователни резултати в различни уеб браузъри.

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

Руби:

• Релси за автопрефикс
• Автопрефиксър на Middleman

Node.js:

• PostCSS Autoprefixer
• Grunt Autoprefixer
• Gulp Autoprefixer

Започнете да изграждате интелигентни оформления

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

Ако имате нужда от визуална помощ, за да планирате следващото си оформление, можете да изпробвате тази кокетна площадка:

Вижте писалката Flexbox @ApeeScape - детска площадка на Flexbox от DD ( @Diegue ) На CodePen .

Отворете го в a нов прозорец .

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