Руководства, Инструкции, Бланки

Полное Руководство Flexbox img-1

Полное Руководство 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-контейнера)

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

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

flex-direction

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

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

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

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

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

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

justify-content

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

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

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

  • 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 -элементов:

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

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

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

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

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

flex-shrink

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

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

flex-basis

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

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

align-self

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поддержка браузерами Разделена «версиями » flexbox на:
  • ( new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex; ).
  • ( tweener ) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox; ).
  • ( old ) – означает поддержку старого синтаксиса от 2009 года (например, display: box; ).

Другие статьи

Полное руководство по Flexbox

Полное руководство по 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-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства justify-content (см. ниже).
  • 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-контейнер (инлайновый или блочный в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

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

Применяется к: родительскому элементу flex-контейнера.

Устанавливает главную ось main-axis. определяя тем самым направление для flex-элементов, размещаемых в контейнере.

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

Применяется к: родительскому элементу flex-контейнера.

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

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

Применяется к: родительскому элементу flex-контейнера.

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

justify-content

Применяется к: родительскому элементу flex-контейнера.

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

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

align-items

Применяется к: родительскому элементу flex-контейнера.

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

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

align-content

Применяется к: родительскому элементу flex-контейнера.

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

Замечание. это свойство не работает с однострочным flexbox.

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

Применяется к: дочернему элементу / flex-элементу.

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

Применяется к: дочернему элементу / flex-элементу.

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

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

Отрицательные числа не принимаются.

flex-shrink

Применяется к: дочернему элементу / flex-элементу.

Определяет для flex-элемента возможность сжиматься при необходимости.

Отрицательные числа не принимаются.

flex-basis

Применяется к: дочернему элементу / flex-элементу.

Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

Применяется к: дочернему элементу / flex-элементу.

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

align-self

Применяется к: дочернему элементу / flex-элементу.

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


Обратитесь к описанию свойства align-items для лучшего понимания доступных значений.

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

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

Теперь давайте используем какие-нибудь свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера всё выглядело хорошо (без @media -запросов!).

Готово. Всё остальное — уже дело оформления. Ниже размещён CodePen, демонстрирующий этот пример. Обязательно попробуйте растянуть/сжать окно браузера и посмотрите, что произойдёт.

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

Давайте попробуем кое-что получше и поиграем с гибкостью flex-элементов! Как насчёт ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

Поддержка браузерами
  • (modern) означает поддержку нового синтаксиса из спецификации ( display: flex; )
  • (hybrid) означает поддержку старого неофициального синтаксиса из 2011 ( display: flexbox; )
  • (old) означает поддержку старого синтаксиса из 2009 ( display: box; )

CSS Flex

CSS Flex в настоящее время рекомендуется W3C и способен более эффективным способом расположить, выровнять и распределить место элементам в контейнере, даже если размер контейнера неизвестен или динамически меняется.

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

Старый CSS Flexbox display: box; за последние годы потерпел много изменений. Изменения были как в спецификации W3C, так и в браузерах для реализации. Теперь новый CSS Flex не имеет проблем с производительностью.

Старый макет Flexbox требует

Новый макет Flex требует

Чтобы применить Flex к некоторым старым мобильным браузерам используйте макет наследие Flexbox .

CSS Flex display: flex; — это не одно свойство, а большой модуль, он включает в себя много всего с целым набором значений. Одни свойства предназначены для контейнера (корневой элемент, известный нам как CSS Flexbox), другие свойства предназначены для дочерних элементов контейнера.

Если обычная разметка предназначена для направления потока всех блоков, то макет Flex основан на гибкости направления потока. На рисунке показана основная идея макета flex.

В принципе, элементы будут размещаться либо по горизонтали как основное направление от main-start до main-end или по вертикали перпендикулярно основному направлению от cross-start до cross-end.

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

flex-containers

Значения для контейнера flex: display: flex | inline-flex;

Таким образом образуется гибкость контекста flex для всех прямых дочерних элементов.

float. clear и vertical-align не имеют никакого влияния на flex.

flex-direction

Свойство flex-direction добавляет гибкость элементам в контейнере основного направления main-axis:

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

  • row в ltr слева направо, в rtl справа налево
  • row-reverse. в ltr справа налево, в rtl слева направо
  • column. так же, как и row. но сверху вниз
  • column-reverse. то же что и row-reverse. но только сверху вниз

Свойство flex-wrap определяет сколько строк в контейнере и новое положение элементам перпендикулярно основному направлению cross-axis.

flex-wrap: nowrap | wrap | wrap-reverse;

  • nowrap по умолчанию в ltr одна колона слева направо, в rtl справа налево
  • wrap. в ltr много колонок слева направо, в rtl справа налево
  • wrap-reverse. в ltr много колонок справа налево, в rtl слева направо

Свойство flex-flow сокращает flex-direction и flex-wrap, в совокупности определяют все направления контейнера. По умолчанию row nowrap .

flex-flow: flex-direction | flex-wrap;

justify-content

Свойство justify-content выравнивает элементы параллельно основному направлению main-start. Это помогает распределять дополнительное свободное пространство, когда оставшиеся или все элементы Flex в полосе не являются гибкими или гибкие, но достигли своего максимального размера. Также контроль над выравниванием элементов когда переполнение.

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

  • flex-start по умолчанию: контейнер элементов в начале полосы
  • flex-end. контейнер элементов в конце полосы
  • center. элементы сосредоточены вдоль полосы
  • space-between. элементы равномерно распределены в полосе; первый пункт находится в начале полосы, последний пункт в конце полосы
  • space-around. элементы распределены равномерно в соответствии с окружающем пространством
Свойство justify-content выравнивает элементы параллельно main-start align-items

Свойство align-items обычно указывает поведение элементам flex чтобы они располагались вдоль основного направления cross axis.

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

  • flex-start. элементы размещаются в верхнем крае в начале полосы
  • flex-end. элементы размещаются в нижнем крае в конце полосы
  • center. элементы в центре cross-axis
  • baseline. элементы распределены согласно полосе
  • stretch для заполнения контейнера принимает значение min-width или max-width
Свойство align-items размещает элементы Flex перпендикулярно основного направления align-content

Свойство align-content выровняет содержимое контейнера flex, если есть дополнительное пространство в cross-axis. Похоже на то, как justify-content выравнивает отдельные элементы в main-axis. это свойство не имеет никакого эффекта, когда контейнер только один.

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

  • flex-start. пакет элементов в начале контейнера
  • flex-end. пакет элементов в конце контейнера
  • center. пакет элементов в центре контейнера
  • space-between. полосы равномерно распределены в первой строке в начале контейнера, в то время как последние находятся в конце
  • space-around. полосы равномерно распределяются на равное пространство между ними
  • stretch заполняет свободное пространство
Выровняет контейнеры Flex если есть дополнительное пространство в cross-axis

По умолчанию элементы flex оформляются в исходном порядке. Свойство order определит порядок расположения контейнеров.

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

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

flex-grow: номер (по умолчанию 0)

отрицательные числа недействительны.

flex-shrink

Если нужно, свойство flex-shrink добавит возможность уменьшаться элементам.

flex-shrink: номер (по умолчанию 1)

отрицательные числа недействительны.

flex-basis

Свойство flex-basis определяет размер элементу.

flex-basis: length | auto (по умолчанию auto)

Свойство flex для сокращения flex-grow. flex-shrink и flex-basis. Второй и третий параметры flex-shrink. flex-basis являются необязательными. По умолчанию 0 1 auto .

flex: none | flex-grow flex-shrink | flex-basis;

align-self

Свойство align-self позволяет выровнять дочерние элементы, значение align-items изменит выбраненные элементы flex. Чтобы понять доступные значения см. объяснения align-items .

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

  • новый — display: flex;
  • гибрид — display: flexbox;
  • старый — display: box;

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