Урок 5. Курс по Flexbox. Расчет размеров flex элемента

Содержание материала:

Шпаргалка по FlexBox

Свойства FLEX контейнера

Назначение: запуск flexbox

Возможные значения: flex / inline-flex

Назначение: направление укладки элементов по осям

Возможные значения: row / row-reverse / column / column-reverse

Назначение: располагать элементы в одну строку или в несколько

Возможные значения: nowrap / wrap / wrap-reverse

Назначение: сокращённая запись для св-в flex-direction и flex-wrap

Возможные значения: row, row-reverse, column, column-reverse / nowrap, wrap, wrap-reverse

Назначение: горизонтальное выравнивание flex-элементов

Возможные значения: flex-start / flex-end / center / space-between / space-around

Назначение: выравнивание flex-элементов вдоль центральной оси контейнера (по высоте)

Возможные значения: stretch / flex-start / flex-end / center / baseline

Назначение: выравнивание строк flex-элементов вдоль центральной оси контейнера

Возможные значения: stretch / flex-start / flex-end / center / space-between / space-around

Свойства FLEX элементов (внутри контейнера)

Назначение: определяет порядок flex-элементов внутри контейнера

Возможные значения: целое число

Назначение: устанавливает фактор растягивания flex-элемента

Возможные значения: целое число

Назначение: устанавливает фактор сужения flex-элемента

Возможные значения: целое число

Назначение: устанавливает размер flex-элемента

Возможные значения: длина элемента (например, 240px)

Назначение: сокращённая запись для св-в flex-grow, flex-shrink и flex-basis

Возможные значения: значения вышеперечисленных св-в

Назначение: переопределяет выравнивание flex элемента

Возможные значения: auto / flex-start / flex-end / center / baseline / stretch

Создание флексбоксов

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

У нас есть широкий красный флекс-элемент, за ним идут маленький зелёный и маленький синий элементы.

Вот соответствующий код из этого примера.

Мы включаем display: flex , чтобы объявить внешний элемент флекс-контейнером. Это всё что нужно, чтобы начать использовать флексбоксы. Теперь все дочерние элементы этого флекс-контейнера автоматически становятся флекс-элементами и, следовательно, размещаются с учётом модели флекс-вёрстки.

Но вы, наверное, заметили, что красный элемент шире двух остальных. Это потому, что мы применили к этому элементу flex-grow: 1 . Вот код, который мы для этого использовали.

Свойство flex-grow устанавливает коэффициент роста флекс-элемента, который определяет, насколько элемент будет вырастать относительно других флекс-элементов (после распределения свободного пространства).

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

Добавление содержимого

Вы наверное удивились, почему мы просто не установили ширину красного элемента с помощью свойства width? Да, мы могли бы это сделать, но в таком случае я не смог бы показать вам следующий фрагмент…

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

Вот что я имел в виду, когда говорил, что коэффициент роста определяет, насколько элемент будет расти после распределения свободного пространства. Добавив больше содержимого к синему элементу, мы эффективно удалили доступное свободное пространство и красному элементу некуда стало расти.

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

Изменение ширины

Итак, после того, как я показал вам, что не нужно устанавливать ширину флекс-элементов, давайте посмотрим, что произойдёт, если мы всё-таки установим ширину.

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

Итак, теперь мы начинаем понимать, почему это называется гибкой вёрсткой. Наши флекс-элементы гибкие и они рады приспособиться к тому, что происходит вокруг них.

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

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

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

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

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

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

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

Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

4 октября 2020 – 1 марта 2020, Москва и онлайн, беcплатно

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

Предисловие

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

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

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

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

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

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

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

В основном элементы будут располагаться вдоль основной оси (от 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-элемента, в зависимости направления основной оси;
  • cross axis — это ось перпендикулярная основной оси, которая называется «поперечной» осью. Её направление зависит от направления основной оси;
  • cross-start | cross-end — — flex-элементы размещаются внутри контейнера, начиная с cross-start и заканчивая cross-end ;
  • cross size — ширина или высота flex-элемента, в зависимости направления поперечной оси;

Полное руководство по 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 -контекст для всех его прямых потомков:

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

flex-direction

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

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

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

flex-wrap

По умолчанию 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-элементы)

Order

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

flex-grow

Это свойство позволяет 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; ).
Chrome Safari Firefox Opera IE Android iOS
21+ (new)
20- (old)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Данная публикация представляет собой перевод статьи « A Complete Guide to Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS Flexbox

Модуль компоновки CSS Flexbox

Перед модулем компоновки Flexbox было четыре режима компоновки:

  • Блок, для разделов на веб-странице
  • Встроенный, для текста
  • Таблица для двумерных табличных данных
  • Положение, для явного положения элемента

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.

Flexbox элементы

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

Этот элемент представляет собой контейнер Flex (синяя область) с тремя элементами Flex.

Пример

Гибкий контейнер с тремя гибкими элементами:

Родительский элемент (контейнер)

Гибкий контейнер становится гибким, установив display свойство в значение Flex:

Пример

Свойства контейнера Flex:

Свойство Flex-Direction

Свойство flex-direction определяет, в каком направлении контейнеру требуется стек элементов Flex.

Пример

Значение Column суммирует элементы Flex по вертикали (сверху вниз):

Пример

Значение столбец-реверс суммирует элементы Flex по вертикали (но снизу вверх):

Пример

Значение Row суммирует элементы Flex горизонтально (слева направо):

Пример

Значение строка-реверс суммирует элементы Flex горизонтально (но справа налево):

Свойство Flex-Wrap

Свойство flex-wrap указывает, должны ли элементы Flex обернуть или нет.

Приведенные ниже примеры имеют 12 элементов Flex, чтобы лучше продемонстрировать свойство flex-wrap .

Пример

Значение Wrap указывает, что элементы Flex будут обтекать при необходимости:

Пример

Значение UN Wrap указывает, что элементы Flex не будут обтекать (по умолчанию):

Пример

Значение Wrap-Reverse указывает, что гибкие элементы будут при необходимости обернуты в обратном порядке:

Свойство Flex-Flow

Свойство flex-flow является сокращенным свойством для задания свойств flex-direction и flex-wrap .

Пример

Свойство «выравнивание-содержимое»

Свойство justify-content используется для выравнивания элементов Flex:

Пример

Значение Center выравнивает элементы Flex в центре контейнера:

Пример

Значение Flex-Start выравнивает элементы Flex в начале контейнера (по умолчанию):

Пример

Значение Flex-End выравнивает элементы Flex в конце контейнера:

Пример

Значение пространство вокруг отображает элементы Flex с пробелами до, между и после строк:

Пример

Значение пробел-между отображает элементы Flex с интервалом между строками:

Свойство Выравнивание-элементы

Свойство align-items используется для выравнивания элементов Flex по вертикали.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items .

Пример

Значение Center выравнивает элементы Flex в середине контейнера:

Пример

Значение Flex-Start выравнивает элементы Flex в верхней части контейнера:

Пример

Значение Flex-End выравнивает элементы Flex в нижней части контейнера:

Пример

Значение Stretch растягивает элементы Flex для заполнения контейнера (по умолчанию):

Пример

Значение Базовая линия выравнивает элементы Flex, такие как Выравнивание базовых линий:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Свойство выравнивания содержимого

Свойство align-content используется для выравнивания гибких линий.

В этих примерах мы используем контейнер высотой 600 пикселей с свойством Flex-Wrap, который имеет значение Wrap, чтобы лучше продемонстрировать align-content свойство.

Пример

Значение пробел-между отображает гибкие линии с равным пространством между ними:

Пример

Значение пространство вокруг отображает гибкие линии с пробелами до, между и после них:

Пример

Значение Stretch растягивает гибкие линии, чтобы занять оставшееся пространство (по умолчанию):

Пример

Значение Center отображает гибкие линии в середине контейнера:

Пример

Значение Flex-Start отображает гибкие линии в начале контейнера:

Пример

Значение Flex-End отображает гибкие линии в конце контейнера:

Идеальное центрирование

В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.

Решение: Задайте для свойств justify-content и align-items значение Center и элемент Flex будут идеально центрированы:

Пример

Дочерние элементы (элементы)

Прямые дочерние элементы контейнера Flex автоматически становятся гибкими (Flex) элементами.

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

Пример

Свойства элемента Flex:

Свойство Order

Свойство order указывает порядок элементов Flex.

Первый элемент Flex в коде не должен отображаться в качестве первого элемента макета.

Значение Order должно быть числом, значением по умолчанию является 0.

Пример

Свойство Order может изменить порядок элементов Flex:

Flex-расти собственности

Свойство flex-grow указывает, сколько гибкого элемента будет увеличиваться относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 0.

Пример

Сделать третий гибкий элемент расти в восемь раз быстрее, чем другие элементы Flex:

Свойство Flex-сжатие

Свойство flex-shrink указывает, сколько гибкого элемента будет сжиматься относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 1.

Пример

Не позволяйте третьему элементу Flex уменьшаться столько, сколько другие элементы Flex:

Свойство Flex-базиса

Свойство flex-basis указывает начальную длину элемента Flex.

Пример

Set the initial length of the third flex item to 200 pixels:

Свойство Flex

Свойство flex является сокращенным свойством для свойств flex-grow , flex-shrink и flex-basis .

Пример

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:

Свойство «выравнивание-само»

Свойство align-self задает выравнивание для выбранного элемента внутри гибкого контейнера.

Свойство align-self переопределяет выравнивание по умолчанию, заданное свойством align-items контейнера.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-self :

Пример

Совместите третий элемент Flex в середине контейнера:

Пример

Совместите второй элемент Flex в верхней части контейнера и третий элемент Flex в нижней части контейнера:

Адаптивная Галерея изображений с помощью Flexbox

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

Отзывчивый сайт с помощью Flexbox

Используйте Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:

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

Свойства Flexbox поддерживаются во всех современных браузерах.

29.0 11.0 22.0 10 48

Свойства Flexbox CSS

В следующей таблице перечислены свойства CSS, используемые с Flexbox:

Flexbox в CSS

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

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» — приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся — логика наше все!

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

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Главная ось — главное направление движения элементов внутри контейнера. Направление главной оси можно изменить с помощью свойства flex-direction. Обратите внимание, что при смене осей, меняются только направления движения блоков внутри, а начало, конец и размер контейнера остаются прежними.

Начало и конец главной оси — элементы располагаются от начала и до конца контейнера.

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

Начало и конец поперечной оси — по поперечной оси заполняются ряды от начала и до конца контейнера. В каждом таком ряду располагаются элементы (читайте ниже).

  • Размер (главный и поперечный) — базовая величина по которой высчитывается ширина или высота внутренних элементов, если размер указан не точно (указан в процентах или не указан вообще, а элемент должен растянуться или сжаться).
  • Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

    После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (→), а кросс ось соответственно вертикальная и направлена сверху вниз (↓).

    Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (↓) и когда перестанут вмещаться в высоту то будут двигаться слева направо (→) — то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется — меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут — это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали. См. пример.

    Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы понять о чем речь, давайте представим что есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать по вертикали мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству align-content. А вот так это выглядит схематически:

    CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции. Тут используется другая модель построения макета и эти css свойства просто игнорируются.

    CSS свойства Flexbox

    Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.

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

    • flex — элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
    • inline-flex — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

    flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

    • row (default) — направление элементов слева направо (→)
    • column — направление элементов сверху вниз (↓)
    • row-reverse — направление элементов справа налево (←)
    • column-reverse — направление элементов снизу вверх (↑)

    Нужно понимать, что при переходе с row на column или с row-reverse на column-reverse меняется только направление осей и больше ничего. Начало и конец расположения блоков остается неизменным (см. картинку в начале). Т.е. если при row элементы начинали свой путь справа/сверху, то при column все останется также — изменится только направление. (см. пример свойства flex-wrap)

    Управляет переносом непомещающихся в контейнер элементов.

    • nowrap (default) — вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
    • wrap — включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
    • wrap-reverse — тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

    меню

    flex-flow: direction wrap

    Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

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

    Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

    • flex-start (default) — элементы будут идти с начала (в конце может остаться место).
    • flex-end — элементы выравниваются по концу (место останется в начале)
    • center — по центру (место останется слева и права)
    • space-between — крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

    Заметка: Работает когда есть как минимум 2 ряда, т.е. при наличии только 1 ряда ничего не произойдет.

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

    Это свойство мало где нужно и вместо него чаще используется align-items (см.ниже).

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

    меню

    Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

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

    меню

    Для элементов контейнера

    Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

    По умолчанию flex-grow: 0

    • Если всем элементам указать flex-grow:1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
    • Если одному из элементов указать flex-grow:1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего.
    • При flex-grow:1 . Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
    • При flex-grow:3 . Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные
    Топ-пост этого месяца:  Создание трехуровневого адаптивного выпадающего меню

    Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow:2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-grow:0.5

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

    По умолчанию flex-shrink:1

    Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px — flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-shrink:0.5

    Устанавливает базовую ширину элемента — ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, em, rem, %, vw, vh и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. При auto элемент получает базовую ширину относительно контента внутри него.

    По умолчанию: auto

    Иногда лучше установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink . Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis. Пример смотрите в заметках.

    flex-basis будет «жестким», если обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; . Все это можно записать так flex:0 0 200px; .

    Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

    По умолчанию: flex: 0 1 auto

    Однако можно указать и одно, и два значения:

    Позволяет изменить свойство align-items , только для отдельного элемента.

    По умолчанию: от align-items контейнера

    • stretch — элемент растягиваются заполняя строку полностью
    • flex-start — элемент прижимаются к началу строки
    • flex-end — элемент прижимаются к концу строки
    • center — элемент выравниваются по центру строки

    baseline — элемент выравниваются по базовой линии текста

    Позволяет менять порядок (позицию, положение) элемента в общем ряду.

    По умолчанию: order: 0

    По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 . . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

    Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

    Чем отличается flex-basis от width?

    Ниже важные различия между flex-basis и width / height:

    flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). Смотрите пример.

    flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

    Абсолютные элементы контейнера не участвуют во flex конструкции. А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

  • При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.
  • По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

    Отличие flex-basis от width — баг или фича?

    Контент внутри flex элемента распирает его и не может выйти за его пределы. Однако если установить ширину через width или max-width , а не flex-basis , то элемент внутри flex контейнера сумеет выйти за пределы этого контейнера (иногда нужно именно такое поведение). Пример:

    Примеры Flex верстки

    В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры смотрите в последних версиях Chrome или Firefox.

    #1 Простой пример с выравниванием по вертикали и горизонтали

    Начнем с самого простого примера — выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

    Или так, без блока внутри:

    #1.2 Разделение (разрыв) между элементами флекс блока

    Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будет разрыв, нужно использовать свойство margin-left:auto или margin-right:auto .

    #2 Адаптивное меню на flex

    Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #3 Адаптивные 3 колонки

    Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

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

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #4 Адаптивные блоки на flex

    Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #5 Галерея на flex и transition

    Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

    #6 Флекс во флекс (просто пример)

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

    Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат — текст начинался с одной линии.

    Еще примеры

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

    Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96.3% используемых сегодня браузеров, с префиксами 98.3%. Это отличный показатель для того чтобы смело использовать flexbox.

    Чтобы знать какие префиксы актуальны на сегодня (июнь. 2020), приведу пример всех flex правил с нужными префиксами:

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

    Chrome Safari Firefox Opera IE Android iOS
    20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1+ (old) 3.2+ (old)
    21+ (new) 6.1+ (new) 22+ (new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)
    • (new) — новый синтаксис: display: flex; .
    • (tweener) — старый неофициальный синтаксис 2011 года: display: flexbox; .
    • (old) — старый синтаксис 2009 года: display: box;

    меню

    Ну и не забывайте про видео, там порой тоже интересно и понятно. Вот парочка популярных:

    Полезные ссылки по Flex

    Flexplorer — наглядный конструктор flex кода.

    ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

    Вся документация по свойству flex находится на официальном сайте.

    Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

    display

    inline-flex
    русский
    english

    Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

    Применяется ко: всем элементам.

    flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

    A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

    Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

    Applies to: all elements.

    flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

    flex-direction

    row-reverse
    column
    column-reverse
    русский
    english

    Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

    Применяется к: flex контейнерам.

    row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

    The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

    Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

    Applies to: flex containers.

    row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

    flex-wrap

    nowrap
    wrap-reverse
    русский
    english

    Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

    Применяется к: flex контейнерам.

    Значение по умолчанию: nowrap.

    nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

    The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

    For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

    Applies to: flex containers.

    Initial: nowrap.

    nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

    flex-flow

    row nowrap
    column-reverse
    column wrap
    row-reverse wrap-reverse
    русский
    english

    Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

    Применяется к: flex контейнерам.

    Значение по умолчанию: row nowrap.

    The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

    Applies to: flex containers.

    Initial: row nowrap.

    order

    русский
    english

    Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

    Применяется к: flex элементам.

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

    The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

    A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

    Applies to: flex items.

    Initial: 0.

    justify-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    русский
    english

    Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

    Применяется к: flex контейнерам.

    Значение по умолчанию: flex-start.

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

    The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

    Applies to: flex containers.

    Initial: flex-start.

    flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

    align-items

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

    Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

    Применяется к: flex контейнерам.

    Значение по умолчанию: stretch.

    flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex containers.

    Initial: stretch.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-self

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

    Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

    Применяется кo: flex элементам.

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

    flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex items.

    Initial: auto.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    stretch
    русский
    english

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

    Применяется к: flex контейнеру.

    Значение по умолчанию: stretch.

    flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

    The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

    Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

    Applies to: flex containers.

    Initial: stretch.

    flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

    Двадцать первый урок. Описание Flexbox-модели

    И хотя flex-сеткой мы уже пользуемся, настало время разобрать её по косточкам css-свойствам.

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

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

    Значение row — это привычная горизонтальная ось. С row-reverse тоже самое, только в обратном направлении справа на лево. Если указать collumn , то основная ось будет уже вертикальная, а collumn-reverse — вертикальная, но снизу вверх.

    Все примеры вы сможете посмотреть на специальном сайте flexbox.help на котором наглядно в интерактивном режиме можно посмотреть работу flex-свойств. Ввиду сложности кода, я не буду здесь приводить примеры отображения.

    Как правило мы работаем с flex-direction: row; .

    По умолчанию для flex запрещен перенос ячеек на новую строчку. Чтобы её разрешить используется свойство flex-wrap:

    Теперь, чтобы не путаться, запомните простое правило: для управления ячейками вдоль главной оси используются свойства justify- , а для управления вдоль поперечной — align- . В нашем случае по горизонтали — это justify- , по вертикали — align- .

    У justify-content есть несколько значений (фактически типовые для многих flex-свойств):

    C flex-start ячейки прижимаются к началу главной оси, с flex-end к концу, а с center — выравниваются по центру.

    Значения space-around и space-between распределяют ячейки по всей ширине так, что между ними образуются пустые промежутки. Если это space-around , то промежутки создаются и от границ контейнера (нижние ячейки при этом центрируются), а если указать space-between , то крайние ячейки плотно прилегают к краям контейнера. Flex-сетка с space-between считается обычной «резиновой» сеткой, которая очень часто используется при верстке. В частности в UniCSS в классе flex сразу прописывается это свойство.

    Выравнивание по поперечной оси (вертикально) задется через align-content, которое работает также как и justify-content и может иметь значение stretch.

    Важный момент — свойство align-content работает только когда разрешен wrap-перенос.

    Значение stretch растягивает ячейки на всю возможную ширину или высоту.

    Когда ячейки в одну строку или запрещен wrap-перенос используется свойство align-items :

    Комбинации всех этих свойств позволяют создавать разные flex-сетки. Если стоит задача сделать какой-то особый вариант, то используйте приведённый выше flex-построитель.

    Помимо свойств контейнера, существуют свойства отдельных flex-элементов.

    Свойство order позволяет задать порядок следования ячейки. По умолчанию у всех ячеек order: 0; .

    Свойство flex-grow задаёт «жадность» элемента. По умолчанию оно flex-grow: 1; . Чем больше число, тем больше будет размер элемента. Данное свойство часто используется там, где нет возможности указать точную ширину. В этом случае предполагают их возможные соотношения.

    Здесь приоритет будет отдан блоку C в 2 раза больше, чем блоку B. Блок A получит только то что осталось.

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

    Свойство flex-basis задает базовый размер ячйки в px, % и т.п. Это свойство также используется редко.

    У отдельной ячейки ещё можно задать некоторые параметры через свойство align-self.

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

    У flex-сетки есть одно замечательно свойство, о котором давно мечтали верстальщики — вертикальное выравнивание. Например вот так можно отцентрировать один блок внутри другого с помощью margin: auto;

    Задания

    1. Посмотрите на странице UniCSS Cheatsheet какие существуют классы для flex-сетки.

    Урок 5. Курс по Flexbox. Расчет размеров flex элемента

    Здрасте! Суть темы ясна уже в названии. Прошу помочь «Элиту из элит» HTML программистов, тех кто разобрался в самых мелких нюансах.** Покажите рабочий алгоритм расчета размера flex-элемента с заданым свойством flex-shrink.**

    Я понял как работает алгоритм flex-grow:
    +++++++++++++++++
    Это простой пример где у ф-элементов не задан размер для зон padding, border и margin. Есть ф-контейнер внутри которого есть ф-элемент «A» и ф-элемент «B». Размер content’ной зоны ф-контейнера по главной оси — 300px. Полный размер ф-элемента «A» по главной оси — 50px, полный размер ф-элемента «B» по главной оси — 50px. Свойство flex-grow у ф-элемента «A» задано в 1, flex-grow у ф-элемента «B» задано в 3.
    * Свободное место = 300px — (50px + 50px) = 200px
    * Доля свободного места = 200px / (1 + 3) = 50px
    * Итоговый размер ф-элемента «A» = 50px + (50px * 1) = 100px
    * Итоговый размер ф-элемента «B» = 50px + (50px * 3) = 200px

    +++++++++++++++++
    Но так и не понял как работает алгоритм вычисления места ф-элемента с flex-shrink. Нарыл немного инфы, потестил, в итоге работает когда как.

    +++++++++++++++
    Например, есть размер ф-контейнера по главной оси 600px и отритцательное пространство составляет -200px.

    ———Сперва нужно умножить каждый полный размер ф-элемента с его значением flex-shrink и получившиеся значения сплюсовать.
    ф-элем 1 (1 * 200) + ф-элем 2 (2 * 200) + ф-элем 3 (3 * 200) + ф-элем 4 (1 * 200) = TI 1400

    ———Далее необходимо поделить каждый ф-элемент на значение TI. Ф-элем 2 например:
    SF у ф-элема 2 = ф-элем 2 (2 * 200px) / TI (1400) = 0.286

    ———Далее необоходимо умножить это с отритцательным пространством (-200px)

    Место удаленное с ф-элема 2 = SF ф-элема 2 (0.286) * отритцательное пространство (-200px) = -57.142 . Округлено до -57.

    ———Ну и нужно прибавить удаленное место с ф-элема 2 к размеру ф-элема 2.

    Итоговый размер ф-элема 2 = полный размер ф-элема (200px) + место удаленное с ф-элема 2 (-57)

    . Нарыл вот это, но оно работает не всегда.
    Полный размер ф-элема + (((flex-shrink * полный размер ф-элема) / (shrink * ф-элем + shrink * ф-элем + shrink * ф-элем + shrink * ф-элем)) * (отритцательное пространство))

    200 — (((1 * 200) / (1 * 200 + 1 * 200 + 1 * 200 + 1 * 500)) * (-100))

    .
    Алгоритм . : полный размер ф-элемента, content,padding,border,margin — алгоритм нормально работает со всеми задаными зонами. Нормально работает в случае если одному или нескольким ф-элементам задан flex-shrink: 0; . Неправильно вычисляет если у ф-элемов разные размеры по главной оси.

    +++++
    Ф-контейнер — элемент с заданым display: flex;
    Ф-элемент — дочерный элемент ф-контейнера. То есть находящийся в первом уровне вложености в ф-контейнер.

    Топ-пост этого месяца:  Как стать блоггером на ютубе и начать зарабатывать на своем увлечении
    Добавить комментарий