Flexbox подреждане на елементите. Практическо приложение на FlexBox. #4 Адаптивни блокове, използващи flex

за автора: Рейчъл Андрю е не само главен редактор на списание Smashing, но и уеб разработчик, писател и говорител. Тя е автор на редица книги, в т.ч Новото CSS оформление, един от разработчиците на системата за управление на съдържание Perch. Пише за бизнеса и технологиите на своя уебсайт rachelandrew.co.uk.

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

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

Подравняване на оста с помощта на align-content

Ако контейнерът има множество оси и е указано flex-wrap: wrap, тогава align-content може да се използва за подравняване на редовете по напречната ос. Но е необходимо допълнително пространство. В тази демонстрация напречната ос се движи в посоката на колоната и съм посочил височината на контейнера да бъде 60vh. Тъй като това е повече от необходимото за показване на всички елементи, остава свободно вертикално пространство.

След това мога да приложа align-content с всеки от .

Ако flex-direction е column, тогава align-content работи както в следния пример.

Както при justify-content, ние работим с група редове и разпределяме свободно пространство.

Имот по място-съдържание

В спецификацията за подравняване на кутия можете да намерите свойството place-content. Използването на това свойство означава, че вие задавате justify-content и align-content едновременно. Първата стойност е за align-content, втората е за justify-content. Ако е посочена само една стойност, тя се прилага и за двете свойства:

Контейнер ( място-съдържание: интервал-между разтягане; )
Отговаря на това:

Контейнер ( align-content: space-between; justify-content: stretch; )
И този код:

Контейнер ( place-content: space-between; )
Еквивалентно на следното:

Контейнер ( align-content: space-between; justify-content: space-between; )

Подравняване на оси с помощта на елементи за подравняване

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

Като алтернатива може да се дефинира от свойството височина в контейнера:

Защо елементите се разтягат до размера на най-високия елемент е защото първоначалната стойност на параметъра align-items е stretch. Елементите се опъват по напречната ос до размера на контейнера в тази посока.

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

В допълнение към началната стойност stretch, можете да зададете align-items на flex-start, в който случай те се подравняват към началото на контейнера и вече не се разтягат на височина.

Стойността flex-end ги премества до края на контейнера по напречната ос.

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

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

Всички тези опции могат да бъдат изпробвани в демо.

Персонализирано подравняване с align-self

Свойството align-items указва подравняването на всички елементи наведнъж. Всъщност той задава стойностите за самоподравняване за всички елементи на групата. Можете също така да използвате свойството align-self на всеки отделен елемент, за да го подравните в линия и спрямо други елементи.

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

Защо няма самооправдание?

Често възниква въпросът защо не е възможно да се подравни един елемент или група от елементи по голяма ос. Защо Flexbox няма свойство -self за подравняване на главната ос? Ако мислите за justify-content и align-content като начин за разпределяне на пространство, отговорът става по-очевиден. Ние работим с елементи като група и разполагаме свободно пространство по определен начин: или в началото или в края на групата, или между елементите.

Може също да е полезно да помислите как работят justify-content и align-content в CSS Grid Layout. В Grid тези свойства се използват за разпределяне на свободно пространство в контейнера на мрежата. между релсите на мрежата. Тук също вземаме група от песни - и използвайки тези свойства, разпределяме свободно пространство между тях. Тъй като работим в група както в Grid, така и във Flexbox, не можем да вземем един елемент и да направим нещо различно с него. Има обаче начин да получите дизайна на оформлението, който дизайнерите на оформление искат, когато говорят за собственото свойство на главната ос. Това е използването на автоматични полета.

Използване на автоматични полета на основната ос

Ако някога сте центрирали блок в CSS (например обвивка за съдържанието на началната страница чрез задаване на лявото и дясното поле на автоматично), тогава вече имате известен опит с автоматичните полета. Стойност на auto за полета запълва възможно най-много място в посочената посока. За да центрираме блока, задаваме както лявото, така и дясното поле на автоматично: всяко от тях се опитва да заеме възможно най-много място и следователно поставя нашия блок в центъра.

Автоматичните полета работят много добре във Flexbox за подравняване на отделни елементи или групи от елементи по главната ос. Следващият пример показва типичен случай. Има лента за навигация, елементите се показват като низ и използват началната стойност justify-content: start. Искам последният елемент да се показва отделно от останалите в края на реда - при условие че има достатъчно място в реда, за да се случи това.

Взимаме този елемент и задаваме свойството margin-left на auto. Това означава, че кутията се опитва да получи възможно най-много място отляво на елемента, което означава, че елементът се избутва към дясната граница.

Ако използвате автоматични полета на главната ос, тогава justify-content вече няма да има ефект, защото автоматичните полета ще заемат цялото пространство, което иначе би било разпределено с помощта на justify-content.

Резервно подравняване

За всеки метод на подравняване е описан резервен вариант - какво ще се случи, ако определеното подравняване не е възможно. Например, ако имате само един елемент в контейнер и посочите justify-content: space-between, какво трябва да се случи? В този случай се прилага резервното подравняване с гъвкаво начало - един елемент ще бъде подравнен в началото на контейнера. В случай на justify-content: space-around, резервното подравняване е center.

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

Безопасно и опасно подравняване

Скорошно допълнение към спецификацията за подравняване на кутии е концепцията за безопасно и небезопасно подравняване с помощта на ключови думи безопасноИ опасно.

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

Контейнер ( дисплей: flex; flex-direction: колона; width: 100px; align-items: unsafe center; ) .item:last-child ( width: 200px; )

Сигурното подравняване предотвратява загубата на данни чрез преместване на преливника от другата страна.

Контейнер (дисплей: flex; flex-direction: колона; ширина: 100px; align-items: безопасен център;) .item:last-child (ширина: 200px;)

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

Заключение

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

justify - за главните оси и align - за напречните;
align-content и justify-content изискват свободно пространство;
свойствата align-content и justify-content се прилагат към елементите в групата, разпределяйки пространство между тях. Не можете да посочите подравняването на отделен елемент, защото липсва свойството -self;
ако искате да подравните един елемент или да разделите група по главната ос, използвайте автоматични полета;
align-items задава едни и същи align-self свойства за цялата група. Използвайте align-self върху дъщерен елемент на група, за да зададете индивидуално неговата стойност.

Съдържание:

Flexboxе нов начин за подреждане на блокове на страницата. Това е технология, създадена специално за поставяне на елементи, за разлика от плувките. Като се използва FlexboxМожете лесно да подравнявате елементи хоризонтално и вертикално, да променяте посоката и реда на показване на елементите, да разтягате блокове до пълната височина на родителя или да ги приковавате към долния ръб.

UPD от 02.02.2017 г.:Направих удобен cheat sheet на Flexbox, с демонстрации на живо и описания от спецификацията: Flexbox cheatsheet.

Примерите използват само новия синтаксис. Към момента на писане те са най-правилно показани в Chrome. Те работят частично във Firefox, но изобщо не работят в Safari.

Според caniuse.com, Flexboxне се поддържа от IE 8 и 9 и Opera Mini, а в други браузъри не всички свойства се поддържат и/или се изискват префикси.

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

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

Трябва също да се има предвид, че при използване Flexbox float, clear и vertical-align не работят за вътрешни блокове, както и свойства, които дефинират колони в текста.

Нека подготвим тестова площадка за експерименти:

Един родителски блок (жълт) и 5 дъщерни блока.

Дисплей: гъвкав

И сега добавяме display: flex; . Вътрешните div са подредени (по главната ос) с колони с еднаква височина, независимо от съдържанието.

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

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

Показване на свойство за Flexboxможе да има две значения:

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

inline-flex - държи се като inline block. Съдържанието има приоритет (съдържанието разпръсква блокове до необходимата ширина, така че линиите да пасват, ако е възможно).

Flex-посока

Посоката на блоковото оформление се контролира от свойството flex-direction.

Възможни стойности:

ред - ред (стойност по подразбиране); ред-обратен - ред с елементи в обратен ред; колона - колона; column-reverse - колона с елементи в обратен ред.

ред и ред-обратно

колона и колона-реверс

Flex-обвивка

Може да има много блокове в един ред. Дали се увиват или не се определя от свойството flex-wrap.

Възможни стойности:

nowrap - блоковете не се прехвърлят (стойност по подразбиране); обвиване - прехвърлят се блокове; wrap-reverse - блоковете се увиват и подреждат в обратен ред.

За съкращения на свойствата flex-direction и flex-wrap има свойство: flex-flow.

Възможни стойности: можете да зададете и двете свойства или само едно. Например:

flex-flow: колона; flex-flow: wrap-reverse; flex-flow: обратно обвиване на колона;

Демонстрация за обръщане на ред, обръщане на ред:

Поръчка

За да контролирате реда на блоковете, използвайте свойството order.

Възможни стойности: числа. За да поставите блока първи, дайте му ред: -1:

Justify-съдържание

Има няколко свойства за подравняване на елементи: justify-content, align-items и align-self.

justify-content и align-items се прилагат към родителския контейнер, align-self се прилага към дъщерните.

justify-content отговаря за подравняването на главната ос.

Възможни стойности за justify-content:

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

flex-начало и flex-end

пространство-между, пространство-около

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

align-items отговаря за подравняването по перпендикулярната ос.

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

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

гъвкав-начало, гъвкав-край

основна линия, разтягане

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

align-self също е отговорен за подравняването на перпендикулярната ос, но е настроен на отделни гъвкави елементи.

Възможни стойности за самоподравняване:

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

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

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

Възможни стойности:

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

гъвкав-начало, гъвкав-край

център, разтягане

пространство-между, пространство-около

пс:Никога не успях да видя някои неща в действие, например линията flex-flow: column wrap или пълното въвеждане на същата flex-direction: column; flex-wrap: обвивка; .

Елементите стоят в колона, но не се прехвърлят:

wrap не работи с flex-direction: column; , въпреки че в спецификацията изглежда така:

Мисля, че с времето ще проработи.

UPD от 21.06.2014 г.:всичко работи, ако зададете височината на блока. Благодаря за бакшиша

Пълното ръководство за CSS Flexbox. Това пълно ръководство обяснява всичко за flexbox, като се фокусира върху всички възможни свойства за родителския елемент (flex container) и дъщерните елементи (flex items). Той също така включва история, демонстрации, шаблони и таблица за поддръжка на браузър.

Заден план

flex-flow (Отнася се за: родителския елемент на flex контейнера)

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

Гъвкав поток:<‘flex-direction’> || <‘flex-wrap’>

justify-content

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

гъвкав старт(по подразбиране): елементите се изместват в началото на посоката на огъване.
гъвкав край: Елементите се преместват към края на посоката на огъване.
започнете: елементите се преместват в началото режим на писанепосоки.
край: елементите се изместват в края режим на писанепосоки.
наляво: елементите се изместват към левия ръб на контейнера, ако това няма смисъл flex-direction, тогава той се държи като започнете.
точно: елементите се изместват към десния ръб на контейнера, ако това няма смисъл flex-direction, тогава той се държи като започнете.
център: елементите са центрирани по линията
интервал между: елементите са равномерно разпределени по линията; първият елемент е в началото на реда, последният елемент е в края на реда
пространство-около: Елементите са равномерно разположени по една линия с еднакво разстояние около тях. Имайте предвид, че визуално интервалите не са равни, тъй като всички елементи имат еднакво пространство от двете страни. Първият елемент ще има една единица пространство срещу ръба на контейнера, но две единици пространство между следващия елемент, тъй като следващият елемент има свое собствено разстояние, което се прилага.
пространство-равномерно: Елементите са разпределени така, че разстоянието между всеки два елемента (и разстоянието до ръбовете) е еднакво.

Моля, имайте предвид, че поддръжката на браузъра за тези стойности има свои собствени нюанси. Например, интервал междуникога не е получавал поддръжка за Edge и начало/край/ляво/дясно все още не е в Chrome. На MDN. Най-безопасните стойности са гъвкав старт, гъвкав крайИ център.

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

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

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

опъвам, разтягам(по подразбиране): разтягане за запълване на контейнер (все още се спазват минимална ширина/максимална ширина)
гъвкав старт / започнете / самостоятелен старт: елементите се поставят в началото на напречната ос. Разликата между тях е малка и се състои в съответствието flex-directionправила или режим на писанеправила
гъвкав край / край / самоцел: Елементите са разположени в края на напречната ос. Разликата отново е фина и се крие в съответствието flex-directionили режим на писанеправила
център: елементите са центрирани по напречната ос
базова линия: елементите са подравнени спрямо основната си линия

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

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

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

Забележка: Това свойство няма ефект, когато има само един ред гъвкави елементи.

гъвкав старт / започнете: елементи, преместени в началото на контейнера. По-поддържан гъвкав стартизползва, flex-directionдокато започнетеизползва режим на писанепосока.
гъвкав край / край: елементи, преместени в края на контейнера. По-поддържан гъвкав крайизползва flex-directionдокато крайизползва режим на писанепосока.
център: Елементите са центрирани в контейнера
интервал между: елементите са равномерно разпределени; първият ред е в началото на контейнера, а последният ред е в края
пространство-около: Елементите са равномерно разположени с еднакво разстояние около всеки ред
пространство-равномерно: елементите са разпределени равномерно, с равно пространство около тях
опъвам, разтягам(по подразбиране): линиите се разтягат, за да запълнят оставащото пространство

Свойства за първи дъщерни елементи (гъвкави елементи)

поръчка

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

Артикул (поръчка: ; /* по подразбиране е 0 */ )

flex-grow

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

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

Елемент(flex-grow: ; /* по подразбиране 0 */ )

flex-shrink

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

Артикул ( flex-shrink: ; /* по подразбиране 1 */ )
Отрицателните числа не се поддържат.

flex-основа

Това свойство определя размера по подразбиране на елемент, преди да разпредели оставащото пространство. Това може да бъде дължина (напр. 20%, 5 rem и т.н.) или ключова дума. Ключова дума Автоматиченозначава "вижте моето свойство за ширина или височина". Ключова дума съдържаниеозначава "размер въз основа на съдържанието на елемент" - тази ключова дума все още не се поддържа много добре, така че е трудно да се провери какво се използва за нея максимално съдържание, min-съдържаниеили годно съдържание.

Артикул ( гъвкава основа: | Автоматичен; /* автоматично по подразбиране */ )
Ако е зададено на 0 , допълнителното пространство около съдържанието не се взема предвид. Ако е зададено на Автоматичен, допълнително пространство се разпределя в зависимост от неговата flex-growзначения.

Вижте този чертеж.

flex

Това е стенограмата за използване flex-grow, flex-shrinkИ flex-основазаедно. Втори и трети параметър ( flex-shrinkИ flex-основа) не са задължителни. По подразбиране е 0 1 Автоматичен.

Артикул ( flex: няма | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
Препоръчително е да използвате това съкратено свойствовместо да задава индивидуални свойства. Това намаление интелигентно задава други стойности.

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

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

Примери

Нека започнем с един много прост пример, който решава почти ежедневен проблем: перфектно центриране. Най-простото решение за тази задача е да използвате flexbox.

Parent ( display: flex; height: 300px; /* Или каквото и да е */ ) .child ( width: 100px; /* Или каквото и да е */ height: 100px; /* Или каквото и да е */ margin: auto; /* Magic ! */ )
Това се случва поради факта, че границата на свойството за вертикално подравняване е зададена на Автоматиченвъв гъвкав контейнер, абсорбира допълнително пространство. Така че задаване на марж на Автоматиченще направи обекта идеално центриран по двете оси.

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

Flex-container ( /* Първо създаваме flex контекст */ display: flex; /* След това дефинираме flex-direction и позволяваме на елементите да се обвиват в нови редове * Не забравяйте, че това е същото като: * flex-direction: row ; * flex-wrap: wrap; */ flex-flow: row wrap /* След това определяме как се разпределя оставащото пространство */ justify-content: space-around;
Готов. Всичко останало е просто стайлинг.

Ако промените резолюцията или мащаба на екрана, ще изглежда така:

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

/* Големи екрани */ .navigation ( display: flex; flex-flow: row wrap; /* Това ще подравни елементите към края на линията на главната ос */ justify-content: flex-end; ) /* Средни екрани */ @ media all and (max-width: 800px) ( .navigation ( /* На средно големи екрани ние центрираме елементите чрез равномерно разпределение на бялото пространство около елементите */ justify-content: space-around; ) ) /* Малки екрани */ @media all and (max-width: 500px) ( .navigation ( /* На малки екрани вече не използваме посока на ред, а колона */ flex-direction: column; ) )

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

Средни екрани

Малки екрани

Нека опитаме нещо още по-добро, като си поиграем с гъвкавостта на гъвкавите елементи! Какво ще кажете за оформление на цяла страница с 3 колони с горен и долен колонтитул. И не зависи от първоначалния ред на елементите.

Wrapper ( display: flex; flex-flow: row wrap; ) /* Казваме, че всички елементи имат ширина 100%, чрез flex-base */ .wrapper > * ( flex: 1 100%; ) /* Използваме оригиналната поръчка за първата мобилна опция * 1. заглавка * 2. статия * 3. отстрани 1 * 4. отстрани 2 * 5. долен колонтитул */ /* Средни екрани */ @media всички и (мин. ширина: 600px) ( /* Казваме и на двете странични ленти да са на един ред */ .aside ( flex: 1 auto; ) ) /* Големи екрани */ @media all and (min-width: 800px) ( /* Обръщаме реда на първата странична лента и основната и кажете на основния елемент, така че да заема два пъти ширината на другите две странични ленти */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order : 2;) .aside-2 ( ред : 3; ) .футер ( ред : 4 ) )

@mixin flexbox() ( дисплей: -webkit-box; дисплей: -moz-box; дисплей: -ms-flexbox; дисплей: -webkit-flex; дисплей: flex; ) @mixin flex($values) ( -webkit- box-flex: $values; -webkit-flex: $values; -webkit-box-ordinal-group: $val; -ordinal-group: $val; -webkit-order: .item (@include flex(2); )

Грешки

Разбира се, Flexbox не е без грешки. Най-добрата колекция от тях, която съм виждал, е Flexbugs от Филип Уолтън и Грег Уитуърт. Това е хранилище с отворен код за проследяване на всички тях, така че мисля, че е най-добре просто да се свържете към него.

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

Разбити по „версия“ на flexbox:

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

Blackberry Browser 10+ поддържа новия синтаксис.

За повече информация как да смесвате синтаксиси, за да получите по-добра поддръжка на браузъра, моля, вижте

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

Отнася се за: гъвкав контейнер.

Стойност по подразбиране: опъвам, разтягам.

Flex-start Линиите са разположени в началото на напречната ос. Всеки следващ ред е равен на предходния. flex-end Редовете се поставят, започвайки от края на напречната ос. Всеки предишен ред е равен на следващия. център Линиите се поставят в центъра на контейнера. space-between Линиите са равномерно разпределени в контейнера и разстоянието между тях е еднакво. space-around Линиите са равномерно разположени, така че разстоянието между два съседни реда да е еднакво. Празното пространство преди първия ред и след последния ред е равно на половината от разстоянието между два съседни реда. space-evenly Редовете се разпределят равномерно. Бялото пространство преди първия ред и след последния ред е със същата ширина като другите редове. разтягане Линиите се разтягат равномерно, за да запълнят наличното пространство.

Свойството align-content подравнява линиите на гъвкавия контейнер в рамките на гъвкавия контейнер, когато има допълнително пространство в напречната ос, подобно на това как justify-content подравнява отделни елементи в рамките на главната ос. Обърнете внимание, че това свойство няма ефект върху едноредов гъвкав контейнер. Стойностите имат следните значения:

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

Отнася се за: гъвкави контейнери.

Първоначално: опъвам, разтягам.

Линиите за гъвкаво начало са опаковани към началото на гъвкавия контейнер. Напречният начален ръб на първата линия във гъвкавия контейнер се поставя изравнен с напречния начален ръб на гъвкавия контейнер и всяка следваща линия се поставя наравно с предходната линия. flex-end Линиите са опаковани към края на гъвкавия контейнер. Крайният напречен ръб на последната линия се поставя наравно с ръба на напречния край на гъвкавия контейнер и всяка предходна линия се поставя наравно със следващата линия. централните линии са опаковани към центъра на гъвкавия контейнер. Линиите във гъвкавия контейнер се поставят една на друга и са подравнени в центъра на гъвкавия контейнер, с равни количества пространство между ръба на кръстосаното начално съдържание на гъвкавия контейнер и първия ред във гъвкавия контейнер, както и между кръстосано крайно съдържание край на гъвкавия контейнер и последния ред във гъвкавия контейнер. (Ако остатъчното свободно пространство е отрицателно, линиите ще препълват еднакво и в двете посоки.) space-between Линиите са равномерно разпределени във гъвкавия контейнер. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична на flex-start. В противен случай напречният начален ръб на първия ред във гъвкавия контейнер се поставя наравно с напречния начален ръб на съдържанието на гъвкавия контейнер, напречният край на последния ред във гъвкавия контейнер се поставя наравно с напречния ръба на крайното съдържание на гъвкавия контейнер, а останалите линии във гъвкавия контейнер са разпределени така, че разстоянието между всеки две съседни линии да е еднакво. space-around Линиите са равномерно разпределени във гъвкавия контейнер, с половин размер пространства от двата края. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична с центъра. В противен случай линиите във гъвкавия контейнер са разпределени така, че разстоянието между всеки две съседни линии е еднакво, а разстоянието между първите/последните редове и краищата на гъвкавия контейнер е половината от размера на разстоянието между гъвкавите линии. space-evenly Линиите са равномерно разпределени във гъвкавия контейнер. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична с центъра. В противен случай линиите във гъвкавия контейнер са разпределени така, че разстоянието между всяка гъвкава линия е еднакво. разтягане Линиите се разтягат, за да заемат оставащото пространство. Ако остатъчното свободно пространство е отрицателно, тази стойност е идентична на flex-start. В противен случай свободното пространство се разделя поравно между всички линии, увеличавайки техния напречен размер.

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

За да центрираме нашата кутия, ние използваме свойството align-items, за да подравним нашия елемент по напречната ос, която в този случай е оста на блока, движеща се вертикално. Използваме justify-content, за да подравним елемента по главната ос, която в този случай е вградената ос, която върви хоризонтално.

Можете да разгледате кода на този пример по-долу. Променете размера на контейнера или вложения елемент и вложеният елемент винаги остава центриран.

Свойства, които контролират подравняването

Свойствата, които ще разгледаме в това ръководство, са както следва.

justify-content - контролира подравняването на всички елементи по главната ос.
align-items - контролира подравняването на всички елементи по напречната ос.
align-self - контролира подравняването на отделен гъвкав елемент по напречната ос.
align-content - описано в спецификацията като за „опаковане на гъвкави линии“; контролира пространството между гъвкавите линии по напречната ос.

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

Забележка: Свойствата за подравняване във Flexbox са поставени в тяхната собствена спецификация - CSS Box Alignment Level 3. Очаква се, че тази спецификация в крайна сметка ще замени свойствата, както са дефинирани във Flexbox Level One.

Кръстосаната ос

Свойствата align-items и align-self контролират подравняването на нашите flex елементи по напречната ос, надолу по колоните, ако flex-direction е row и по реда, ако flex-direction е column.

Ние използваме подравняване на напречна ос в най-простия пример за огъване. Ако добавим display: flex към контейнер, дъщерните елементи стават flex елементи, подредени в ред. Всички те ще се разтегнат, за да бъдат толкова високи, колкото най-високият елемент, тъй като този елемент определя височината на елементите по напречната ос. Ако вашият гъвкав контейнер има зададена височина, тогава елементите ще се разтегнат до тази височина, независимо от това колко съдържание има в елемента.

Причината, поради която елементите стават с еднаква височина, е, че първоначалната стойност на align-items, свойството, което контролира подравняването по напречната ос, е настроено на stretch.

Можем да използваме други стойности, за да контролираме подравняването на елементите:

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

В живия пример по-долу стойността на align-items е stretch. Опитайте другите стойности и вижте как всички елементи се подравняват един срещу друг във гъвкавия контейнер.

Подравняване на един елемент с align-self

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

В този следващ пример на живо, flex контейнерът има align-items: flex-start, което означава, че всички елементи са подравнени към началото на напречната ос. Насочих първия елемент с помощта на селектор за първо дете и зададох този елемент на align-self: stretch ; друг елемент е избран с помощта на неговия клас избран и даден align-self: center. Можете да промените стойността на align-items или да промените стойностите на align-self на отделните елементи, за да видите как работи това.

Промяна на основната ос

Досега разгледахме поведението, когато нашата flex-direction е row и докато работим на език, написан отгоре надолу. Това означава, че главната ос минава по реда хоризонтално, а подравняването на напречната ос премества елементите нагоре и надолу.

Ако променим нашата flex-direction на column, align-items и align-self ще подравнят елементите отляво и отдясно.

Можете да изпробвате това в примера по-долу, който има гъвкав контейнер с flex-direction: колона, но иначе е абсолютно същият като предишния пример.

Подравняване на съдържание по напречната ос - свойството align-content

Досега подравнявахме елементите или отделен елемент в зоната, дефинирана от гъвкавия контейнер. Ако имате опакован многоредов гъвкав контейнер, тогава може също да искате да използвате свойството align-content, за да контролирате разпределението на пространството между редовете. В спецификацията това е описано като гъвкави линии за опаковане.

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

Свойството align-content приема следните стойности:

подравняване на съдържание: гъвкаво начало
подравняване на съдържание: гъвкав край
подравняване на съдържание: център
align-content: интервал между
align-content: space-around
подравняване на съдържание: разтягане
align-content: space-evenly (не е дефинирано в спецификацията на Flexbox)

В примера на живо по-долу гъвкавият контейнер има височина от 400 пиксела, което е повече от необходимото за показване на нашите елементи. Стойността на align-content е space-between, което означава, че наличното пространство се споделя междугъвкавите линии, които са разположени наравно с началото и края на контейнера по напречната ос.

Изпробвайте другите стойности, за да видите как работи свойството align-content.

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

Забележка: стойността space-evenly не е дефинирана в спецификацията на flexbox и е по-късно допълнение към спецификацията на Box Alignment. Поддръжката на браузъра за тази стойност не е толкова добра, колкото тази на стойностите, дефинирани в спецификацията на flexbox.