flex в CSS


Содержание

Про CSS

Flexbox

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

UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

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

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

Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.

Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

Приготовим полигон для экспериментов:

Один родительский блок (желтый) и 5 дочерних.

Display: flex

И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

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

Свойство display для Flexbox может принимать два значения:

flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

Flex-direction

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

row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

row и row-reverse

column и column-reverse

Flex-wrap

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

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

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse :

Order

Для управления порядком блоков служит свойство order .

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

Justify-content

Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

justify-content отвечает за выравнивание по главной оси.

Возможные значения justify-content :

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

flex-start и flex-end

Align-items

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

Возможные значения align-items :

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

Align-self

align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

Возможные значения align-self :

auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

Align-content

Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

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

Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

Элементы стоят столбиком, но не переносятся:

Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

Думаю, со временем заработает.

UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

Полное руководство по 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-элемента, в зависимости направления поперечной оси;

CSS Flexbox основы c примерами

Использование flexbox

Flexbox применяется не к самим элементам, которые необходимо сгруппировать а к содержащему их контейнеру. Для этого необходимо задать ему css свойство display: flex;.

Примеры:

С использованием flexbox

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

flex-direction

Элементам можно задать также направление размещения. Для этого используется свойство flex-direction.

У свойства может быть 4 параметра

  • row — отображение строкой (используется по умолчанию)
  • column — отображение столбцом
  • row-reverse — строка в обратном направлении
  • column-reverse — столбец в обратном направлении

Примеры:

flex-wrap

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

Пример:

Дефолтное значение flex-wrap: nowrap;

Используем flex-wrap: wrap;

justify-content

Для группировки элементов можно использовать свойство justify-content.

У свойства может быть 6 параметров

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

Выравнивание элементов во Flex контейнере

На этой странице

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

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items . Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content .

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

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

  • justify-content — управляет выравниванием элементов по главной оси.
  • align-items — управляет выравниванием элементов по перекрёстной оси.
  • align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
  • align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Илон Маск рекомендует:  Что такое код domattribute >value

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Перекрёстная ось

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column .

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

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

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch . Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи align-self

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

В следующем примере, у flex контейнера установлено align-items: flex-start , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch ; у следующего элемента с классом selected установлено align-self: center . Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column .

Выравнивание содержимого по перекрёстной оси — свойство align-content

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

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

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.


В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Выравнивание содержимого по главной оси

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

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

Свойство justify-content может принимать те же самые значения, что и align-content .

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between . Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column , то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

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

Выравнивание и flex-direction

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row .

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end . В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство flex-direction , элементы контейнера выстраиваются в режиме записи вашего языка ( ltr или rtl ).

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column . Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

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

Использование auto margins для выравнивания по главной оси

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto .

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что это юзкейс для свойства justify-self . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает margin-right . Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

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

Будущие функции выравнивания для Flexbox

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content .

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap , как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Полное руководство по Flexbox – учимся на примерах

Опубликовано keynikel в 29.09.2020

Рубрики
Что еще почитать?
  • Подсказки о доступности подсказок 16.10.2020
  • Плейсхолдеры в полях делают больно 10.10.2020
  • Сборка Webpack 4 для чайников и сочувствующих 22.06.2020
  • Блок со скошенными углами на CSS 19.04.2020
  • Использование инлайн SVG-спрайтов в WordPress теме 13.09.2020

Какой самый лучший способ понять Flexbox? Изучить основы и написать кучу разных штук. Именно этим мы и займемся.

Но сначала стоит кое-что уточнить:

  • Эта статья написана для разработчиков среднего уровня и предполагает, что вы уже имеете представление о Флексбоксах. Но…
  • Если вы в курсе, что такое CSS, но не имели дела с Флексбокс, то здесь находится исчерпывающий гид по технологии (статья в открытом доступе, необходимо, примерно, 45 минут на чтение).
  • А если вы не особо хороши в CSS, то я рекомендую вам Полное (Практическое) введение в CSS(платный курс, 74 лекции, английский язык).
  • Примеры из статьи можно реализовывать в произвольном порядке.
  • Флексбокс – всего лишь технология разметки. Реальные проекты одной только разметкой не ограничиваются.
  • Обозначения типа div.ohans означают что это элемент div с классом ohans.

Пример 1. Как сделать фотогалерею на Флексбокс

Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется.
Рассмотрим простую сетку:

У нас есть main.gallery и 10 изображений в нем.
Убедимся, что main.gallery растягивается на весь доступный экран:

Кое-что об изображениях

По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)

На старт

Сейчас наша галерея будет выглядеть следующим образом:

Размеры всех 10 изображений остались нетронутыми. При необходимости картинки переместятся на вторую строку. Послушные ребята =)

А теперь, на сцену выходит Флексбокс:

С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items.
В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:

Картинки теперь уместились все в одну линию, да еще и растянулись по вертикали. Жалкое зрелище =(

Все это результат стандартного поведения Флексбокс:

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

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

Наша мощная флексбокс-галерея готова.

Преимущества использования Флексбокс

Сейчас преимущества использования Флексбокс не особо заметны, ведь тот же самый вид был и до его подключения.
Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания.
Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания: flex-direction: row , justify-content: flex-start и align-items: flex-start.
Разметку галереи можно легко поменять поигравшись со следующим значением:

Вёрстка на Flexbox в CSS. Полный справочник

update 25.07.19 Долго и постепенно, на протяжении года находил и переводил статьи по больным темам при работе с CSS Flexbox и решил обновить статью, исправив и дополнив некоторые моменты, добавив подробные разъяснения на каждый момент. К тому же добавил подробные объяснения некоторых методик при использовании Flexbox

Илон Маск рекомендует:  Self - Переменная Delphi

В этой статье вы узнаете буквально все свойства модуля Flexbox и даже больше — вы сможете посмотреть на примерах, как высчитываются и работают самые сложные из них, конечно же, параллельно увидев полное объяснение каждого. Эта статья является переводом самой последней версии статьи — A Complete Guide to Flexbox. В интернете конечно есть другие переводы, но они либо для старых версий, либо в некоторых моментах, с неправильным переводом, а есть и частичные переводы, вырванные из контекста всего руководства.

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

Введение

Flexbox разметка в CSS даёт один из наиболее эффективных способов расстановки, выравнивания и распределения места между элементами внутри контейнера, даже если их размер неизвестен или динамичен (собственно, по этому его и называют flex, от слова flexible, что по-английски имеет двойственное значение — гибкий и уступчивый, что очень сочетается с моделью поведения flexbox).

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

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

Учтите, что Flexbox лучше всего подходит для компонентов в приложении и для не масштабных шаблонов. Существует Grid модель разметки, которая предназначена для работы с большими шаблонами и комплексными приложениями. Именно этот момент очень хорошо и доступно расписан в статьях — Решающая CSS битва: Grid против Flexbox и Когда нужно использовать Flexbox

Полное руководство по свойствам размеров Flexbox

Дата публикации: 2020-02-18

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

В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex.

Заполнение свободного пространства

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

Свойства размеров Flexbox позволяют принимать решения в трех видах сценариев:

flex-grow: как должны вести себя flex-элементы при избытке свободного пространства (как они должны растягиваться).

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

flex-shrink: как должны вести себя гибкие элементы при нехватке свободного места (как они должны сжиматься).

flex-basis: как должны вести себя гибкие элементы, когда места ровно столько, сколько нужно.
Поскольку flexbox является одномерным макетом, в отличие от CSS Grid, который является двумерным, вы можете выделить свободное пространство вдоль главной оси (будь то сверху вниз, снизу вверх, слева направо или справа налево) , Вы можете установить направление главной оси, используя свойство flex-direction.

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

1. Положительное свободное пространство: flex-grow

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

Генератор flex, flexbox

Вид отображения

Значения для display

Направление главной оси

Группируется в короткую запись и устанавливается первым значением: «flex-flow: row nowrap».

Значения для flex-direction

row: → Слева направо.

row-reverse: ← Справа налево.

column: ↓ Сверху вниз.

column-reverse: ↑ Снизу вверх.

Выравнивание по главной оси

Значения для justify-content

flex-start: ← Прижаты к началу.

flex-end: → Прижаты к концу.

center: → ← Прижаты по центру.

space-between: ← → Равномерно распределяются по всей длине. Первый и последний элемент прижаты к своим краям контейнера.

space-around: ← → Равномерно распределены по всей длине. Пустое пространство перед первым и после последнего элемента равно половине пространства между двумя соседними элементами.

Выравнивание по поперечной оси

Значения для align-items

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

Многострочная организация блоков

Группируется в короткую запись и устанавливается вторым значением: «flex-flow: row nowrap«.

Значения для flex-wrap

nowrap: В одну линию.

wrap: В несколько строк.

wrap-reverse: В несколько строк, в противоположном направлении указанном в flex-direction.

Способ выравнивания по вертикали (только многострочный режим)

Значения для align-content

flex-start: ↑ Строки в начале поперечной оси (прижать блоки к верху).

flex-end: ↓ Расположение строк начиная с конца поперечной оси (прижать блоки к низу).

center: Строки по центру контейнера.

space-between: Равномерное распределение строк по всей высоте.


space-around: Равномерное распределение строк по всей высоте с отступом перед первой строкой и после последней, равными половине рсстояния между соседними строками.

stretch: Строки равномерно растянуты.

Ширина контейнера

Высота контейнера

Общие значения для всех блоков × Очистить

Жадность

Отношение размеров у блоков. Блок со значением 2 будет в два раза больше блока со значением 1.

Группируется в короткую запись и устанавливается первым значением: «flex: 1 auto».

Сжимаемость

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

Группируется в короткую запись и устанавливается вторым значением: «flex: 0 1 auto».

Базовый размер

Основа блока. Является начальным (базовым) размером элемента. Возможно указывать размер в следующих единицах измерения: px, em, %, mm, pt и т.д..

Группируется в короткую запись и устанавливается третьим значением: «flex: 0 1 auto«.

Отступ

Внешний отступ. Значение auto работает как по вертикали так и по горизонтали.

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

Пример: «10px auto«.

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

Пример: «10px auto«.

Порядок (вес)

Порядок следования блока. Блоки с меньшим весом располагаются вначале.

Выравнивание по поперечной оси

Выравнивание блока текущей строки. Переписывает значение контейнера указанного в align-items.

Значения для align-self

auto: Значение родительского контейнера из align-items.

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

CSS ✂ Копировать

HTML ✂ Копировать

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

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

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

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

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

1. Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

2. Блоки

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

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

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

3. Результат

Помимо результата, отображающего полный код CSS стилей и HTML, здесь возможно установить ряд настроек совместимости не влияющих на визуализацию.

Поддержка старых браузеров

Поддержка включается во вкладке «Результат» при включенной отметке «Поддержка старых браузеров (префиксы)». Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

↑ Выберите блок для задания индивидуальных параметров

Контейнер ✂ Копировать

Блоки ✂ Копировать

Даты и версии начала поддержки Flex в браузерах

Колонки можно сортировать по дате и названию браузера.

Дата ↓ Браузер ↓ Версия Тип поддержки
04.09.2012 IE 10 -ms- Поддерживает только 2012 синтакс
17.10.2013 IE 11 Поддерживает с некоторыми багами, см. ниже
29.07.2015 Edge 12 Полная
24.10.2006 Firefox 2 -moz- Поддерживает только старую спецификацию и не поддерживает wrapping
14.05.2013 Firefox 22 -webkit- Не поддерживает: flex-wrap, flex-flow, align-content
18.03.2014 Firefox 28 Полная
25.01.2010 Chrome 4 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
26.06.2012 Chrome 21 -webkit-
18.07.2013 Chrome 29 Полная
18.03.2008 Safari 3.1 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
22.10.2013 Safari 7 -webkit-
01.10.2015 Safari 9 Полная
05.11.2012 Opera 12.1 Полная
02.07.2013 Opera 15 -webkit- (Поскольку Opera перешла на движок Blink как у Chrome)
08.08.2013 Opera 17 Полная
03.04.2010 iOS Safari 3.2 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
10.03.2014 iOS Safari 7 -webkit-
16.09.2015 iOS Safari 9 Полная
16.03.2015 Opera Mini 1 Полная (С версии 8 на iOS использует iOS Safari движок)
26.10.2009 Android Browser 2.1 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
09.12.2013 Android Browser 4.4 Полная

Особенности старых браузеров IE

По умолчанию в IE10 параметр flex имеет значение «-ms-flex: 0 auto» вместо «flex: 0 1 auto«. Третье значение, flex-basis, в параметре «flex: 0 1 auto» для IE11 обязательно. Некорректно рассчитывается высота при установленных у блоков значений min-height и вертикальное выравнивание для IE10 и IE11.

CSS Flexbox

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

29.0 11.0 22.0 10 48

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Example

A flex container with three flex items:

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

Example

The column value stacks the flex items vertically (from top to bottom):

Example

The column-reverse value stacks the flex items vertically (but from bottom to top):

Example

The row value stacks the flex items horizontally (from left to right):

Example

The row-reverse value stacks the flex items horizontally (but from right to left):

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

Example

The wrap value specifies that the flex items will wrap if necessary:

Example

The nowrap value specifies that the flex items will not wrap (this is default):

Example

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

Example

The justify-content Property

The justify-content property is used to align the flex items:

Example

The center value aligns the flex items at the center of the container:

Example

The flex-start value aligns the flex items at the beginning of the container (this is default):

Example

The flex-end value aligns the flex items at the end of the container:

Example

The space-around value displays the flex items with space before, between, and after the lines:

Example

The space-between value displays the flex items with space between the lines:

The align-items Property

The align-items property is used to align the flex items vertically.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The center value aligns the flex items in the middle of the container:

Example

The flex-start value aligns the flex items at the top of the container:

Example

The flex-end value aligns the flex items at the bottom of the container:

Example

The stretch value stretches the flex items to fill the container (this is default):

Example

The baseline value aligns the flex items such as their baselines aligns:

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

The align-content Property

The align-content property is used to align the flex lines.


In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Example

The space-between value displays the flex lines with equal space between them:

Example

The space-around value displays the flex lines with space before, between, and after them:

Example

The stretch value stretches the flex lines to take up the remaining space (this is default):

Example

The center value displays display the flex lines in the middle of the container:

Example

The flex-start value displays the flex lines at the start of the container:

Example

The flex-end value displays the flex lines at the end of the container:

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

The element above represents four blue flex items inside a grey flex container.

Example

The flex item properties are:

The order Property

The order property specifies the order of the flex items.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

Example

The order property can change the order of the flex items:

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

Example

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

The flex Property

The flex property is a shorthand property for the flex-grow , flex-shrink , and flex-basis properties.

Example

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

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overr >align-items property.

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Example

Align the third flex item in the middle of the container:

Example

Align the second flex item at the top of the container, and the third flex item at the bottom of the container:

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

Разбираемся с флексбоксами CSS

����‍�� Премиум-темы для Вордпресс с русскоговорящей поддержкой

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

Не помню точно в каком году появилась блочная верстка. Я перешел на нее с табличной примерно в 2006. Не смотря на кучу новых семантических тегов HTML5 и новых свойств CSS3, подход к верстке в целом особо не менялся с годами — в основе всегда были позиционированные блоки. Сегодня блочная верстка практически умерла , как и когда-то табличная. На смену ей пришли и плотно заняли свое место флексбоксы и гриды (про гриды я расскажу отдельно). И это не просто очередные новомодные свойства CSS. Флексбоксы — это требование времени, вызванное необходимостью упрощения адаптивной верстки.

Я не ставлю целью сделать очередной справочник по флексам. Разберу несколько рабочих примеров, расскажу про основные свойства для тех, кто еще не знаком с флексами. А дальше каждый решит сам, нужно ему это или нет. Под каждым примером есть прямая ссылка на описание свойства в официальном источнике — сайте консорциума всемирной паутины.

Что такое флексбокс

Flexbox (CSS3 Flexible Box) — режим разметки, созданный для более предсказуемого упорядочения элементов на страницах, адаптированных под различные размеры экранов и устройств. В большинстве случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats), не схлопывают отступления flex-контейнера и его содержимого (margin collapse).

Однозначно, флексбоксы проще блоков — дочерние элементы внутри флексбокса могут размещаться в любом направлении, могут менять размер, чтобы адаптироваться к различным размерам дисплея. Более простое позиционирование элементов, независимость порядка отображения элементов от его положения в коде делает код более чистым.

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

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

Основные свойства флексбоксов

1. Порядок и ориентация

2. Позиционирование

3. Гибкость

Display

Флексбокс может быть блочным (flex) или строковым (inline-flex). Работает это в привычном для CSS виде.

Flex-direction

Направление оси контейнера может быть четырех видов:

  1. row — строка (по умолчанию);
  2. row-reverse — строка в обратном порядке;
  3. column — колонка;
  4. column-reverse — колонка в обратном порядке.

Flex-wrap

Управление переносом элементов.

  1. nowrap (по умолчанию) — элементы располагаются в один ряд или в одну колонку в зависимости от заданного flex-direction;
  2. wrap — элементы переносятся на следующий ряд;
  3. wrap-reverse — элементы переносятся на следующий ряд в обратном направлении.

Flex-flow

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

Order

Управление порядком элементов.

Например, чтобы выдвинуть вперед всех четвертый элемент, зададим ему order=-1.

Justify-content

Управление выравниванием по главной оси.

  1. flex-start — выравнивание от начала главной оси (по умолчанию);
  2. flex-end — выравнивание от конца главной оси;
  3. center — выравнивание по центру главной оси;
  4. space-between — выравнивание по главной оси, распределяя свободное пространство между собой;
  5. space-around — выравнивание по главной оси, распределяя свободное пространство вокруг себя.
  6. space-evenly — как space-around, только расстояние у крайних элементов до краев контейнера будет равным расстоянию между элементами.

Align-items

Выравнивание элементов по поперечной оси внутри ряда.

  1. flex-start — от начала поперечной оси;
  2. flex-end — от конца поперечной оси;
  3. center — по центру;
  4. baseline — по базовой линии;
  5. stretch — по всему пространству поперечной оси (по умолчанию).

Align-self

Выравнивание по поперечной оси отдельных элементов.

  1. auto — используется align-items родительского элемента (по умолчанию);
  2. flex-start — от начала поперечной оси;
  3. flex-end — от конца поперечной оси;
  4. center — по центру;
  5. baseline — по базовой линии;
  6. stretch — растягивается, занимая все пространство по высоте.

Align-content

Выравнивание внутри многострочного контейнера.

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

Flex-grow

Коэффициент увеличения элемента при наличии свободного пространства в контейнере.

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

Flex-shrink

Коэффициент уменьшения элемента при отсутствии свободного пространства в контейнере.

Flex-basis

Базовая ширина элемента для распределения свободного пространства контейнера.

В примере ширина четвертого элемента равна 50%, пятого — в зависимости от ширины контента.

В заключение

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

Поддержка флексбоксов браузерами на 2020 год

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

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

Подпишитесь на рассылку
Один раз в месяц все новые материалы в одном письме

200 бесплатных наборов кистей для Фотошопа
516

Как в Фотошопе сменить русский язык на английский
187

Как быстро наполнить сайт на WordPress с помощью плагина WP All Import
166

25 лучших шаблонов для создания интернет-магазина на OpenCart
160

Как открыть *.CDR в Adobe Illustrator
136

5 лучших книг по Вордпресс на русском языке
135

Как быстро удалить все исходящие заявки в друзья во Вконтакте
125

10 рекомендуемых книг-бестселлеров по PHP
117

Как отправить большое видео в Ватсап
108

20 лучших шаблонов Вордпресс для сферы услуг
100

Как импортировать большую базу данных MySQL в обход ограничений phpMyAdmin
99

Как скачать приватное видео из фейсбука
91

Установка временнОй зоны в PHP
86

Как использовать Media Query в JavaScript
85

20 лучших Вордпресс шаблонов для образовательных сайтов
81

Как включить мультисайт и создать сеть сайтов на Вордпресс
74

Подключаем цели Яндекс Метрики к WordPress Contact Form 7
62

Как проверить сайт на технические ошибки онлайн
61

10 бесплатных шаблонов лендингов в PSD
57

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

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Илон Маск рекомендует:  Запускаем сайт и выбираем хостинг
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL