Значение по умолчанию : 0 1 auto .

W3C рекомендует использовать сокращённое свойство flex , вместо отдельных свойств, поскольку flex правильно сбрасывает любые неуказанные компоненты для типового использования .

align-self

Свойство align-self позволяет переопределить выравнивание по умолчанию (или значение, указанное через align-items ) для отдельных flex-элементов. Для понимания доступных значений обратитесь к описанию align-items для flex-контейнера.

Значения

Для третьего и четвёртого flex-элементов переопределено выравнивание через свойство align-self .

Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении лейаутов в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас?

Любой верстальщик знает несколько путей выровнять что-либо по вертикали или сделать 3-х колоночный макет с резиновой средней колонкой. Но давайте признаем, что все эти способы довольно странные, похожи на хак, подходят не во всех случаях, сложны для восприятия и не работают при несоблюдении определенных магических условий, которые сложились исторически.

Случилось так потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, затем стало модным верстать float-ами, а после официальной смерти ie6 добавились еще и приемы с inline-block. В итоге мы получили в наследство гремучую смесь всех этих приемов, используемую для построения лейаутов 99,9% всех существующих веб-страниц.

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap .

Доступные значения flex-wrap :

• nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
• wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
• wrap-reverse: то-же что и wrap , но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути, flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap .

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

CSS

align-content

Существует также свойство align-content , которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)

Доступные значения align-content :

• flex-start: ряды блоков прижаты к началу flex-контейнера.
• flex-end: ряды блоков прижаты к концу flex-контейнера
• center: ряды блоков находятся в центре flex-контейнера
• space-between: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
• space-around: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.
• stretch (значение по умолчанию) : Ряды блоков растянуты, дабы занять все имеющееся пространство.

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px , em , % , …) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение (по умолчанию 0)

Пример 1 :

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:1 , то они будут одинакового размера
• Если один из них имеет flex-grow:2 , то он будет в 2 раза больше, чем все остальные

Пример 2 :

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
• Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1 .

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

Демо для flex-grow, flex-shrink и flex-basis

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

• flex-start: flex-блок прижат к началу поперечной оси
• flex-end: flex-блок прижат к концу поперечной оси
• center: flex-блок располагаются в центре поперечной оси
• baseline: flex-блок выравнен по baseline
• stretch (значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width / max-width , если таковые заданы.

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order . Оно задается целым числом и по умолчанию равно 0 .

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

margin: auto по вертикали . Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

My-flex-container { display: flex; height: 300px; /* Или что угодно */ } .my-flex-block { width: 100px; /* Или что угодно */ height: 100px; /* Или что угодно */ margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ }

Вещи, которые следует помнить

1. Не следует использовать flexbox там, где в этом нет необходимости.
2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

В заключение

Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости;)

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Об авторе : Рэйчел Эндрю - не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout , один из разработчиков системы управления контентом Perch . Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk .

Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.

Значения точно так же работают по вертикали, то есть если flex-direction применяется для column . Правда, у вас в столбце может не оказаться свободного места для распределения, если не добавить высоту или block-size контейнера, как в этом демо .

Выравнивание по осям с помощью align-content

Затем я могу применить align-content с любым из значений .

Если в качестве flex-direction указано column , то align-content работает как в следующем примере .

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

Свойство по place-content

Container { place-content: space-between stretch; }
Соответствует этому:

Container { align-content: space-between; justify-content: stretch; }
А такой код:

Container { place-content: space-between; }
Равноценен следующему:

Container { align-content: space-between; justify-content: space-between; }

Выравнивание по осям с помощью align-items

Как вариант, её можно определить свойством height в контейнере:

Почему элементы растягиваются до размера самого высокого элемента - это потому что начальным значением параметра align-items является stretch . Элементы растягиваются по поперечной оси до размера контейнера в этом направлении.

Обратите внимание, что в многострочном контейнере каждая строка действует как новый контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов в этой строке.

Кроме начального значения stretch , можно присвоить элементам align-items значение flex-start , в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Если вы используете значение center , то элементы центрируются относительно друг друга:

Мы также можем выровнять их по базовой линии. Это гарантирует выравнивание текста по одному основанию, в отличие от выравнивания полей вокруг текста.

Все эти варианты можно попробовать в демо .

Индивидуальное выравнивание с помощью align-self

В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.

Почему нет justify-self ?

Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками . Здесь тоже мы берём группу дорожек - и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.

Использование автоматических полей на основной оси

Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере показан типичный случай. Есть панель навигации, элементы отображаются в виде строки и используют начальное значение justify-content: start . Я хочу, чтобы последний пункт отображался отдельно от других в конце строки - при условии, что в строке достаточно места для этого.

Берём этот элемент и указываем для свойства margin-left значение auto . Это значит, что поле пытается получить как можно больше места слева от элемента, то есть элемент выталкивается к правой границе.

Если вы используете автоматические поля на главной оси, то justify-content перестанет действовать, так как автоматические поля займут всё пространство, которое в противном случае распределялось бы с помощью justify-content .

Запасное выравнивание

В текущей спецификации вы не можете изменить запасное выравнивание. Есть примечание к спецификациям , которое допускает возможность указания произвольного запасного варианта в будущих версиях.

Безопасное и небезопасное выравнивание

В следующем коде последний элемент слишком широк для контейнера, а при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границы страницы.

Container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; }


Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.

Container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; }


Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.

Заключение

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

Модуль разметки Flexbox (от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе «Возможная рекомендация » стандартизации W3C (W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически (вот почему его назвали «гибкий» ).

Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину (и порядок ) его элементов для оптимального заполнения доступного пространства (в основном для поддержки всех видов и размеров экранов ).

Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам (блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).

И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости (и это не игра слов ) для поддержки больших и сложных приложений (особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее ).

Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.

Основные понятия и термины

Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру (родительскому элементу, известному как flex-контейнер ), в то время как другие должны быть применены к дочерним элементам (назовем их flex-элементы ).

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:

В основном, элементы будут размещены либо вдоль главной оси (от точки main-start до main-end ), либо вдоль поперечной оси (от точки cross-start до cross-end ):

• main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction (смотрите ниже );
• main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
• main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
• cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
• cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
• cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:

Container { display: flex; /* или inline-flex */ }

Отметим, что CSS -столбцы (columns ) не имеют эффекта во flex -контейнере.

flex-direction

Это свойство задает главную ось, определяющую направление, в котором размещаются flex -элементы во flex -контейнере. Flexbox (за исключением опционального обертывания ) является концептом однонаправленной разметки.

Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:

Container { flex-direction: row | row-reverse | column | column-reverse; }

• row (по умолчанию ): слева направо для ltr; справа налево для rtl;
• row-reverse : справа налево для in ltr; слева направо для rtl;
• column : так же как row , но сверху вниз;
• column-reverse : так же как row-reverse , но снизу вверх.

flex-wrap

По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:

Container{ flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap (по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
• wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
• wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :

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

justify-content

Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex -элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:

Container { justify-content: flex-start | flex-end | center | space-between | space-around; }

• flex-start (по умолчанию): элементы выравниваются к началу строки;
• flex-end : элементы выравниваются к концу строки;
• center : элементы выравниваются по центру строки;
• space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
• space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси (перпендикулярной главной ):

Container { align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start : граница элементов cross-start располагается на линии cross-start ;
• flex-end : граница элементов cross-start располагается на линии cross-end ;
• center : элементы располагаются по центру поперечной оси;
• baseline : выравнивание элементов происходит согласно базовой линии;
• stretch (по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер (с учетом значений min-width/max-width ).

align-content

Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.

Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:

Container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start : строки располагаются в начале контейнера;
• flex-end : строки располагаются в конце контейнера;
• center : строки располагаются посередине контейнера;
• space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
• space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
• stretch (по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

По умолчанию, flex -элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex -контейнере:

Item { order: ; }

flex-grow

Это свойство позволяет flex -элементу «разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.

Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:

Item { flex-grow: ; /* default 0 */ }

flex-shrink

Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:

Item { flex-shrink: ; /* default 1 */ }

Отрицательные числа недопустимы.

flex-basis

Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:

Item { flex-basis: | auto; /* по умолчанию установлено auto */ }

flex

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры (flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :

Item { flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию (или определенное свойством align-items ) для отдельных flex -элементов.

Доступные значения вы можете найти в описании свойства align-items :

Item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.

Примеры

Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:

Parent { display: flex; height: 300px; /* Или что угодно */ } .child { width: 100px; /* Или что угодно */ height: 100px; /* Или что угодно */ margin: auto; /* Магия! */ }

Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера (для эстетичности ), но с возможностью автоматического заполнения.

Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо (без использования медиа запросов ):

Flex-container { /* Сначала создаем контекст flex-разметки */ display: flex; /* Затем определяем направление потока и хотим ли мы, чтобы элементы были обернуты. * Помните, что это то же самое, что и: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Теперь мы определяем, как распределять оставшееся пространство */ justify-content: space-around; }

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

HTML:

CSS:

Flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }

Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:

CSS:

/* Большие экраны*/ .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; } }

HTML:

• Главная
• О нас
• Продукты
• Контакты

CSS:

Navigation { list-style: none; margin: 0; background: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end; } .navigation a { text-decoration: none; display: block; padding: 1em; color: white; } .navigation a:hover { background: darken(deepskyblue, 2%); } @media all and (max-width: 800px) { .navigation { justify-content: space-around; } } @media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } .navigation a { text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.1); } .navigation li:last-of-type a { border-bottom: none; } }

Давайте попробуем сделать еще лучше, поиграв с «гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:

CSS:

Wrapper { display: flex; flex-flow: row wrap; } /* Задаем для всех элементов ширину в 100% */ .header, .main, .nav, .aside, .footer { flex: 1 100%; } /* В этом случае для ориентации на мобильные устройства мы полагаемся на исходный порядок: * 1. заголовок * 2. навигация * 3. основная часть * 4. боковая панель * 5. подвал */ /* Средние экраны*/ @media all and (min-width: 600px) { /* Обе боковые панели располагаются в одной строке */ .aside { flex: 1 auto; } } /* Большие экраны */ @media all and (min-width: 800px) { /* Инвертируем порядок вывода первой боковой панели и основной части, и указываем основному элементу необходимость занимать максимум в два раза больше места, чем две боковые панели */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }

HTML:

CSS:

Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center; } .wrapper > * { padding: 10px; flex: 1 100%; } .header { background: tomato; } .footer { background: lightgreen; } .main { text-align: left; background: deepskyblue; } .aside-1 { background: gold; } .aside-2 { background: hotpink; } @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }

Использование префиксов для flexbox

Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.

А все потому, что спецификация flexbox менялась с течением времени, создав «old » (старую ), «tweener «(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации - это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer , который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

SCSS:

@mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); }

Поддержка браузерами

Разделена «версиями » flexbox на:

• (new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex;

  Псевдоэлемент::placeholder color(или в некоторых случаях псевдокласс) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder: .