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


Фон

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

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

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

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

Основы & amp; Терминология

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

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

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

  • главная ось- основная ось гибкого контейнера - это основная ось, вдоль которой выложены элементы гибкости. Остерегайтесь, это не обязательно горизонтально; это зависит от свойстваflex-direction(см. ниже).
  • main-start | main-end- Элементы гибкости размещаются внутри контейнера, начиная с основного запуска и заканчивая main-end.
  • основной размер- ширина или высота гибкого элемента, в зависимости от того, что находится в основном измерении, является основным размером элемента. Свойство основного размера элемента flex - это свойство «ширина» или «высота», в зависимости от того, что находится в основном измерении.
  • поперечная ось- ось, перпендикулярная основной оси, называется поперечной осью. Его направление зависит от направления основной оси.
  • кросс-старт | кросс-конец- Линии Flex заполняются элементами и помещаются в контейнер, начиная со стороны поперечного начала гибкого контейнера и направляясь к стороне поперечного конца.
  • кросс-размер- Ширина или высота элемента гибкости, в зависимости от того, что находится в поперечном измерении, является поперечным размером элемента. Свойство кросс-размера имеет значение «ширина» или «высота», которое находится в поперечном измерении.

Свойства для родителя
(гибкий контейнер)

# display

Это определяет контейнер гибкости; inline или block в зависимости от заданного значения. Это позволяет использовать гибкий контекст для всех его прямых детей.

.container {
display: flex; /* or inline-flex */
}

Обратите внимание, что столбцы CSS не влияют на контейнер flex.

# гибкое направление


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

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
  • строка(по умолчанию): слева направо вltr; справа налево вrtl
  • строка-обратная: справа налево вltr; слева направо вrtl
  • столбец: то же, что истрока, но сверху вниз
  • column-reverse: то же, что истрока-обратная, но снизу вверх

#flex -wrap

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

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(по умолчанию): все элементы flex будут находиться в одной строке
  • wrap: элементы flex будут перенесены на несколько строк, сверху вниз.
  • wrap-reverse: элементы flex будут перенесены на несколько строк снизу вверх.

Существует несколько визуальных демонстрацийflex-wrapздесь .

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

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

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

# justify-content


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

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start(по умолчанию): элементы упакованы в начало строки
  • flex-end: элементы упакованы в конец строки
  • center: элементы центрируются вдоль строки
  • пробел между: элементы равномерно распределены по строке; первый элемент находится в стартовой строке, последний элемент в конечной строке
  • space-around: элементы равномерно распределены в строке с равным пространством вокруг них. Обратите внимание, что визуально пробелы не равны, поскольку все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства против края контейнера, но два единицы пространства между следующим элементом, потому что следующий элемент имеет свой собственный интервал, который применяется.
  • space-evenly: элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) равно.

# align-items


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

.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start: край кросс-начала поля элементов помещается в строку кросс-старта
  • flex-end: край кросс-края полей элементов помещается в кросс-конец
  • центр: элементы центрированы по оси x
  • исходная позиция: элементы выравниваются, например, их исходные линии выравниваются
  • stretch(по умолчанию): растягивать, чтобы заполнить контейнер (по-прежнему соблюдайте максимальную ширину min-width)

# align-content


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

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

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



.item {
order: <integer>; /* default is 0 */
}

# flex-grow


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

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

.item {
flex-grow: <number>; /* default 0 */
}

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

# flex-shrink

Это определяет способность к гибкому элементу при необходимости уменьшаться.

.item {
flex-shrink: <number>; /* default 1 */
}

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

# flex-basis

Это определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т. Д.) Или ключевое слово. Ключевое словоautoозначает «посмотреть на мое свойство ширины или высоты» (которое было временно выполнено ключевым словомдо тех пор, пока оно не устарело). Ключевое словоcontentозначает «размер его на основе содержимого элемента» - это ключевое слово пока не поддерживается, поэтому трудно проверить и усложнить, что его братьяmax-content,min-contentиfit-contentdo.

.item {
flex-basis: <length> | auto; /* default auto */
}

Если установлено значение0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значениеauto, дополнительное пространство распределяется на основе его значенияflex-grow. См. Рисунок.

# flex

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

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

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

# align-self


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

Пожалуйста, ознакомьтесь с объяснениямиalign-items, чтобы понять доступные значения.

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

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


Примеры

.parent {
display: flex;
height: 300px; /* Or whatever */
}

.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

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

Теперь давайте использовать еще несколько свойств. Рассмотрим список из 6 предметов, все с фиксированными размерами в области эстетики, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены по горизонтальной оси, чтобы при изменении размера браузера все было в порядке (без медиа-запросов!).

.flex-container {
/* We first create a flex layout context */
display: flex;

/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/

flex-flow: row wrap;

/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

Готово. Все остальное - это лишь некоторые проблемы с дизайном. Ниже приведена ручка с этим примером. Обязательно зайдите в CodePen и попробуйте изменить размер ваших окон, чтобы узнать, что произойдет.

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

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}

/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}

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

.wrapper {
display: flex;
flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/


/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/

.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}

Префикс Flexbox

Flexbox требует некоторого префикса поставщика, чтобы поддерживать большинство доступных браузеров. Он не просто включает в себя добавочные свойства с префиксом поставщика, но фактически существуют совершенно разные имена свойств и значений. Это связано с тем, что спецификация Flexbox со временем изменилась, создав версии «old», «tweener» и «new» .

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

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

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}

@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}

.wrapper {
@include flexbox();
}

.item {
@include flex(1 200px);
@include order(2);
}

Связанные свойства

Другие ресурсы

Ошибки

Flexbox, безусловно, не без ошибок. Лучшая коллекция из них, которую я видел, это Филипп Уолтон и Flexbugs Грега Уитворта. Это место с открытым исходным кодом для отслеживания всех из них, поэтому я думаю, что лучше всего просто связать это.

Разбита «версией» flexbox:

  • (новая) означает недавний синтаксис из спецификации (например,display: flex;)
  • (tweener) означает нечетное неофициальное синтаксис с 2011 года (например,display: flexbox;)
  • (старый) означает старый синтаксис с 2009 года (например,display: box;)
3.1+ (старый)6.1+ (новый)
ChromeSafariFirefox






21+ (новый)

2-21 (старый)

22+ (новый)

12.1+ (новый) 10 (tweener) 11+ (новый)