Флексбоксы что это

Конспект «Флексбокс. Знакомство»

Флексбокс — это CSS-механизм, который позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Чтобы включить флексбокс, нужно задать элементу свойство display: flex; . После этого:

1. Элемент с display: flex; превращается во «флекс-контейнер».
2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают распределяться по новым правилам.

Главная и поперечная оси

Оси — одно из основных понятий во флексбоксах.

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

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

• Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.
• Поперечной осью называется направление, перпендикулярное главной оси. Вдоль этой оси работают «вертикальные» выравнивания.

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction , которое задаётся для флекс-контейнера. Значения свойства:

• Значение по умолчанию row — главная ось направлена слева направо.
• column — главная ось направлена сверху вниз.
• row-reverse — главная ось направлена справа налево.
• column-reverse — главная ось направлена снизу вверх.

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

• Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
• Если главная ось направлена вертикально, то поперечная ось смотрит направо.

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

Распределение флекс-элементов

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

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

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

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

CSS-свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси. Доступные значения align-items :

• Значение по умолчанию stretch — элементы растягиваются на всю «высоту» флекс-контейнера.
• flex-start — элементы располагаются у начала поперечной оси.
• flex-end — элементы располагаются в конце поперечной оси.
• center — элементы располагаются по центру поперечной оси.
• baseline — элементы выравниваются по базовой линии текста внутри них.

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

Поперечное выравнивание можно задать каждому элементу отдельно. Для этого используется свойство align-self , которое задаётся для самих флекс-элементов, а не для флекс-контейнера. У свойства align-self те же самые значения, что и у align-items .

Перенос флекс-элементов

Если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд, то:

• Они будут сжиматься до минимально возможной ширины.
• Даже если им задать ширину, механизм флексбокса может её уменьшить.
• Если они перестанут помещаться в контейнер и после уменьшения, то выйдут за его пределы, но продолжат располагаться в один ряд.

Чтобы этого не происходило, нужно воспользоваться свойством флекс-контейнера flex-wrap . У него есть два значения:

• Значение по умолчанию nowrap — перенос флекс-элементов на новую строку запрещён.
• wrap — разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются вдоль поперечной оси, первый ряд — в начале поперечной оси, последний — в конце.
• wrap-reverse — также разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются в обратном порядке: первый — в конце поперечной оси, последний — в начале.

Выравнивание строк флекс-контейнера

Свойство align-content управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У него и свойства justify-content очень похожие значения:

• Значение по умолчанию stretch — растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну. Отображение строк при этом зависит от значения align-items :
  1. Если у align-items задано значение stretch , то элементы в строках растягиваются на всю высоту своей строки.
  2. Если значение отлично от stretch , то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items .
• flex-start — располагает ряды флекс-элементов в начале поперечной оси.
• flex-end — располагает ряды флекс-элементов в конце поперечной оси.
• center — располагает ряды флекс-элементов в середине поперечной оси так, что отступов между соседними рядами нет, а расстояния между первым рядом и краем флекс-контейнера равно расстоянию между последним рядом и другим краем.
• space-between — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.
• space-around — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.
• space-evenly равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами и у краёв одинаковые.

Свойство align-content «перекрывает» заданное значение align-items , которое управляет выравниванием флекс-элементов вдоль поперечной оси. Это происходит и в случае, когда есть только один ряд флекс-элементов, и когда рядов несколько.

Ранее в спецификации было описано другое поведение:

• Если есть только один ряд флекс-элементов, то работает align-items .
• Если есть несколько рядов, то работает align-content .

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

Порядковый номер флекс-элемента

Порядок следования флекс-элементов в потоке можно изменять с помощью свойства order , порядкового номера флекс-элемента, не меняя при этом HTML-код.

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

Применение флексбоксов

Идеальное выравнивание

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

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

«Гибкое» меню

Флексбокс будет полезен, если нужно создать раскладку, в которой пункты равномерно распределены по блоку меню, при чём первый пункт примыкает к левой части блока меню, а последний — к правой, с небольшими внутренними отступами.

Чтобы это сделать, нужно задать меню раскладку флексбокса, тогда пункты станут флекс-элементами. Затем с помощью свойства распределения элементов justify-content: space-around; можно добиться нужного результата.

Если вы добавите в меню ещё один пункт, отступы между пунктами меню будут «гибко» меняться, подстраиваясь под новые условия.

Сортировка элементов на CSS

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

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

Блоки одинаковой высоты

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

На флексбоксах можно реализовать раскладку с блоками одинаковой высоты — флекс-элементы по умолчанию растягиваются на всю высоту контейнера. Для этого достаточно задать родительскому блоку display: flex; .

• Наша группа в ВК
• Наша страница в Twitter
• Наш канал в Telegram

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

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

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

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

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

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

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

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

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

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

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

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

3. Гибкость

Display

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

Подробнее на w3.org

Flex-direction

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

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

Подробнее на w3.org

Flex-wrap

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

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

Подробнее на w3.org

Flex-flow

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

Подробнее на w3.org

Order

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

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

Подробнее на w3.org

Justify-content

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

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

Подробнее на w3.org

Align-items

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

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

Подробнее на w3.org

Align-self

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

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

Подробнее на w3.org

Align-content

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

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

Подробнее на w3.org

Flex-grow

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

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

Подробнее на w3.org

Flex-shrink

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

Подробнее на w3.org

Flex-basis

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

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

Подробнее на w3.org

В заключение

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

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

⚡️ Подписывайся на мой канал @DanilinBiz и ты узнаешь, почему фриланс это свобода, а работа в штате рабство.

Автор Иван Данилин

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

Гайд по flexbox

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

Открыть/закрыть навигацию по статье

1. Что это?
2. Основные термины
3. Свойства флекс-контейнера
   1. display
   2. flex-direction
   3. flex-wrap
   4. flex-flow
   5. justify-content
   6. align-items
   7. align-content
   8. gap
   1. order
   2. flex-grow
   3. flex-shrink
   4. flex-basis
   5. flex
   6. align-self
   7. Ссылки
   1. Андрей Захаров советует
   2. Егор Левченко советует
   3. Алёна Батицкая советует
   1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

   Контрибьюторы:

   • Егор Левченко ,
   • Светлана Коробцева ,
   • Дмитрий Приходько ,
   • Дима Шелков

   Обновлено 8 марта 2023

   Что это?

   Скопировать ссылку «Что это?» Скопировано

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

   Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

   Основные термины

   Скопировать ссылку «Основные термины» Скопировано

   • Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
   • Флекс-элемент: элемент, вложенный во флекс-контейнер.

   

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

   

   • Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
   • Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

   

   • Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
   • Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

   

   Свойства флекс-контейнера

   Скопировать ссылку «Свойства флекс-контейнера» Скопировано

   display

   Скопировать ссылку «display» Скопировано

    .container  display: flex;> .container  display: flex; >    Скопировать Скопировано Не удалось скопировать   

   Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

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

    .container  display: inline-flex;> .container  display: inline-flex; >    Скопировать Скопировано Не удалось скопировать   

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

   flex — direction

   Скопировать ссылку «flex-direction» Скопировано

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

    .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >    Скопировать Скопировано Не удалось скопировать   

   • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
   • row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
   • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
   • column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

   

   

   flex — flow

   Скопировать ссылку «flex-flow» Скопировано

   Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .

    .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >    Скопировать Скопировано Не удалось скопировать   

    .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >    Скопировать Скопировано Не удалось скопировать   

   

   flex — grow

   Скопировать ссылку «flex-grow» Скопировано

    .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >    Скопировать Скопировано Не удалось скопировать   

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

   Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

   Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

   flex — shrink

   Скопировать ссылку «flex-shrink» Скопировано

    .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >    Скопировать Скопировано Не удалось скопировать   

   Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.

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

   Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

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

   flex — basis

   Скопировать ссылку «flex-basis» Скопировано

    .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >    Скопировать Скопировано Не удалось скопировать   

   Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

   Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

   Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.

   flex

   Скопировать ссылку «flex» Скопировано

    .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >    Скопировать Скопировано Не удалось скопировать   

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

   Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .

    /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;    Скопировать Скопировано Не удалось скопировать   

   align — self

   Скопировать ссылку «align-self» Скопировано

    .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >    Скопировать Скопировано Не удалось скопировать   

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

   Ссылки

   Скопировать ссылку «Ссылки» Скопировано

   1. Как реально работает flex — grow
   2. Как реально работает flex — shrink
   3. Песочница Флексбоксов
   4. Game: Flexbox Froggy
   5. Game: Flexbox Defense
   6. Game: Flexbox Ducky
   7. Курс по Флексбоксам от Wes Bos

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

   Задавались когда-нибудь вопросом, как работает CSS Flexbox? Наглядно объясняем возможности технологии с использованием анимации.

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

   Разберёмся, как работает display flex CSS. Есть страница:На ней размещено 4 div разных размеров, которые находятся внутри серого div . У каждого div есть свойство display: block . Поэтому каждый блок занимает всю ширину строки. И вот как реализовать CSS display flex. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex контейнером. Делается это так:

   #container

   Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.

   17 нововведений jQuery 3 и советы по их использованию

   flex-direction

   

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

   #container

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

   justify-content

   Отвечает за выравнивание элементов по главной оси:

   #container

   Justify-content может принимать 5 значений:

   Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.

   align-items

   Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items :

   Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:

   

   Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :

   align-self

   Позволяет выравнивать элементы по отдельности:

   #container < align-items: flex-start;>.square#one < align-self: center;>// Only this square will be centered. 

   Для двух блоков применим align-self , а для остальных — align-items: center и flex-direction: row .

   flex-basis

   Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox. flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:

   Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

   flex-grow

   

   Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:

   

   Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1 ? Попробуем сделать flex-grow равным 999:

   

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

   Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.

   flex-grow работает только для главной оси, пока мы не изменим её направление.

   flex-shrink

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

   Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

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

   flex

   Заменяет flex-grow , flex-shrink и flex-basis . Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis) .Создадим два блока:

   .square#one < flex: 2 1 300px;>.square#two

   У обоих одинаковый flex-basis . Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding ). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее:Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex​.

   Дополнительно

   Как с CSS Flexbox меняется размер?

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

   Немного математики

   И последний пример по flex box CSS. Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding , и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок ( flex-shrink: 1 ) теряет 70px. Второй блок ( flex-shrink: 2 ) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow .

   Если помимо flex CSS вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.

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

   

   Следите за новыми постами по любимым темам

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

   Похожие публикации:

   1. Erase c что это
   2. Как называется в программировании
   3. Как удалить банковскую карту с озона
   4. Какую кодировку использует linux