Полное руководство по Flexbox. Flexbox - практичность адаптивной верстки Все свойства flexbox

Модуль разметки 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:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

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;

Why Flexbox?

For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning . These are fine and they work, but in some ways they are also rather limiting and frustrating.

The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:

Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content.

As you"ll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let"s dig in!

Introducing a simple example

In this article we are going to get you to work through a series of exercises to help you understand how flexbox works. To get started, you should make a local copy of the first starter file - flexbox0.html from our github repo - load it in a modern browser (like Firefox or Chrome), and have a look at the code in your code editor. You can also.

Flex-direction: column;

You"ll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.

Note : You can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. Experiment with these values too!

Wrapping

One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example):

Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your element represents a standalone section - which doesn" t have a more specific semantic element to represent it contained within an html document.>

rule:

Flex-wrap: wrap; flex: 200px;

Try this now; you"ll see that the layout looks much better with this included:

We now have multiple rows - as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The flex: 200px declaration set on the articles means that each will be at least 200px wide; we"ll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.

But there"s more we can do here. First of all, try changing your flex-direction property value to row-reverse - now you"ll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.

flex-flow shorthand

At this point it is worth noting that a shorthand exists for flex-direction and flex-wrap - flex-flow . So for example, you can replace

Flex-direction: row; flex-wrap: wrap;

Flex-flow: row wrap;

Flexible sizing of flex items

Let"s now return to our first example, and look at how we can control what proportion of space flex items take up. Fire up your local copy of flexbox0.html , or take a copy of flexbox1.html as a new starting point (see it live).

First, add the following rule to the bottom of your CSS:

Article { flex: 1; }

This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up. In this case, we are giving each element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.

Now add the following rule below the previous one:

Article:nth-of-type(3) { flex: 2; }

Section - article article article - div - button div button div button button button

Let"s look at the code we"ve used for the layout.

Summary

That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we"ll have a look at another important aspect of CSS layouts - CSS Grids.

Flexbox это совершенно новый набор CSS свойств, который позволяет верстальщикам создавать гибкие макеты для сайтов. Он отлично подходит для так называемых отзывчивых макетов, потому что резко снижает сложность верстки. Современные браузеры (включая IE10+, мобильные браузеры iOS и Andrioid) уже поддерживают Flexbox, так что если вы еще не слышали о Flexbox, то самое время, чтобы изучить.

Flexbox готов к использованию

Web изначально задумывался как механизм для обмена научными документами. С тех пор технологии сильно шагнули вперёд, но мы до сих пор используем используем CSS, корнями которого являются те цифровые публикации.

Действительно, CSS верстка и позиционирование элементов на странице являются одними из самых сложных понятий для верстальщиков, независимо от их опыта. Для верстки они используют такие свойства как float , clear , display: block , display: inline для верстки макетов своих сайтов. Но теперь, с новым CSS свойством display: flexbox можно задавать направление, расположение, и промежутки между элементами страницы.

Display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

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

Использование Flexbox и его свойства

Объединение Flexbox и CSS медиа запросы (media queries) является мощным инструментом. В примере ниже я сделал упрощённую версию главной страницы сайта Treehouse, использую современный подход mobile-first и flexbox. Откройте этот пример и поизменяйте размер окна браузера.

На первый взгляд может показаться что в примере нет ничего особенного, но если взглянуть на код, то можно увидеть, что верстка выполнена без использования свойства float: left или float: right . Не используются также свойства display: block или display: inline .

Свойство DISPLAY: FLEX

display: flex | inline-flex

Свойство display: flex применяется к родительскому контейнеру, который становится "гибким контейнером " (flex-контейнер), а так же все его прямые потомки являются "гибкими элементами" (flex элементы). Гибкий контейнер имеет главную ось , которая задаёт основное направление для своих прямых потомков (гибких элементов). Поперечная ось перпендикулярна главной оси. Обе эти оси имеют набор свойств с помощью которых можно управлять расположением гибких элементов по отношению друг к другу в контейнере.

Так же можно создавать вложенные flex-контейнеры, как я сделал в примере выше, т.к. свойство display: flex не наследуется. Блокам с классами.header и.nav назначено свойство display: flex . Это похоже на реализацию строк и столбцов в CSS фреймворке Foundation.

Примечания:

CSS-столбцы columns не работают с flex-контейнером.
float , clear и vertical-align не работают с flex-элементами

Свойство FLEX-DIRECTION

flex-direction: row | row-reverse | column | column-reverse

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

Свойство flex-direction задаёт направление главной оси. Главная ось определяет направление и не обязательно горизонтальное, например при просмотре на мобильных браузерах все элементы контейнера (flex item) группируются в 1 колонку друг за другом. Это задаётся с помощью flex-direction: column . Чтобы элементы контейнера располагались в горизонтальном направлении достаточно задать flex-direction: row .

Т.к. по умолчанию значение свойства flex-direction: row поэтому, даже если вы не объявите его, элементы flex-контейнера будут располагаться горизонтально.

Свойство FLEX

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

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

Свойство flex применяется для элементов flex-контейнера. Это короткая запись, с помощью которой можно задать сразу несколько отдельных свойств: flex-grow , flex-shrink и flex-basis .

Свойства flex-grow и flex-shrink определяют сколько места будет занимать каждый элемент flex-контейнера по отношению друг к другу. По умолчанию flex-grow: 0 , а flex-shrink: 1 . Это означает, что все элементы будут пропорциональны друг к другу.

Свойство flex-basis определяет размеры элементов, чтобы заполнить всё пространство flex-контейнера. Значение этого свойства - auto .

Последние 2 свойства flex-shrink и flex-basis не обязательны. В примере выше, я установил значение flex: 1 для блока с классом.nav , что одно и тоже если прописать ему flex-grow: 1 . Другим flex-элементом в контейнере.header является элемент h1 с классом.logo , для которого установлено flex-grow: 0 , поэтому элемент.nav будет всегда занимать больше места чем элемент.logo .

Свойство JUSTIFY-CONTENT

justify-content: flex-start | flex-end | center | space-between | space-around

Одно из моих любимых свойств, свойство justify-content определяет выравнивание относительно главной оси, помогая распределить оставшееся свободное место внутри flex-контейнера, например, когда его элементы уже не «тянутся», либо тянутся, но уже достигли своего максимального размера. Также позволяет в некотором роде управлять выравниванием элементов при выходе за границы строки.

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

Иллюстрация работы свойства justyfy-content:

В моём примере, блоку с классом.header я прописал значение justify-content: space-between . Это означает, что первый элемент flex-контейнера будет располагаться в начале main start (см. изображение в главе Свойство DISPLAY: FLEX), а последний элемент будет располагаться в конце main end. Все элементы flex контейнера которые находятся между первым и последним будут распределены равномерно.

Для элемента с классом.nav я применил свойство justify-content: space-around для распределения всего пространства равномерно с отступами вокруг каждого элемента flex-контейнера.

В заключении

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

Модуль Flexbox-лейаута (flexible box - «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

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

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

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

Основы

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

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

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

main-axis - главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства flex-direction (см. ниже).
main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
main size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
cross axis - поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
cross-start | cross-end - flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end .
cross size - ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

Свойства

display: flex | inline-flex;

Применяется к:

Определяет flex-контейнер (инлайновый или блочный в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

display : other values | flex | inline-flex;

Имейте в виду:

CSS-столбцы columns не работают с flex-контейнером
float , clear и vertical-align не работают с flex-элементами