Всё о Flexbox CSS (с анимированными диаграммами!)

26 мая, 2020

Этот исчерпывающий список flexbox CSS содержит все, что вам нужно знать, чтобы начать использовать flexbox в своих веб-проектах.

CSS flexbox позволяет легко форматировать HTML. Он позволяет легко выравнивать элементы по вертикали и горизонтали, используя строки и столбцы. Элементы будут «сгибаться» до разных размеров, чтобы заполнить пространство. Это делает адаптивный дизайн проще.

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

Статья содержит полезные анимированные GIF-файлы от Scott Domes, которые сделают flexbox еще проще для понимания и визуализации.

Все свойства CSS Flexbox

Вот список всех свойств flexbox CSS, которые можно использовать для позиционирования элементов в CSS. Далее вы увидите, как они работают.

CSS, который можно применить к контейнеру

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, который можно применять к элементам / элементам в контейнере

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

терминология

Терминологическая диаграмма Flexbox из официальной спецификации W3C .

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

  • main-axis: главная ось гибкого контейнера – это основная ось, вдоль которой располагаются гибкие элементы. Направление основано на свойстве flex-direction.
  • main-start | main-end:гибкие элементы размещаются в контейнере, начиная со стороны основного начала и по направлению к стороне основного конца.
  • main size: ширина или высота гибкого контейнера или гибкого элемента, в зависимости от того, что находится в основном измерении, является основным размером этого блока. Таким образом, его основным свойством размера является либо свойство ширины, либо высоты, в зависимости от того, что находится в основном измерении.
  • cross axis: ось, перпендикулярная главной оси, называется поперечной осью. Его направление зависит от направления главной оси.
  • cross-start | cross-end: гибкие линии заполнены элементами и помещены в контейнер, начиная со стороны поперечного начала гибкого контейнера и по направлению к поперечной стороне.
  • cross size:: ширина или высота гибкого элемента, в зависимости от размера креста, является размером креста элемента. Свойство размера креста имеет значение «ширина» или «высота» в поперечном измерении.

CSS Display Flex

display: flex “говорит” вашему браузеру: «Я хочу использовать flexbox с этим контейнером».

div элемент по умолчанию display:block. Элемент с этой настройкой отображения занимает всю ширину линии, в которой он находится. Вот пример четырех цветных div в родительском div с настройкой отображения по умолчанию:

Источник: Скотт Домс

Чтобы использовать flexbox в разделе вашей страницы, сначала преобразуйте родительский контейнер в контейнер flex, добавив display: flex;.

Это инициализирует этот контейнер как гибкий и применяет некоторые стандартные свойства flex.

Источник: Скотт Домс

Flex Direction

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

Расположение по умолчанию после применения display: flex – элементы располагаются вдоль главной оси слева направо. Анимация ниже показывает, что происходит при flex-direction: column добавлении в элемент контейнера.

Источник: Скотт Домс

Вы также можете установить flex-direction в row-reverse и column-reverse.

Источник: Скотт Домс

Justify Content

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

Вот наши наиболее распространенные варианты , используемые для обоснования содержания: flex-start | flex-end | center | space-between | space-around.

Вот как выглядят различные варианты:

Источник: Скотт Домс

space-between распределяет элементы так, чтобы элементы ровно распределились по горизонтали. space-around аналогично, но с отступами по бокам.

Flex Align Items

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

Вот наиболее распространенные варианты выравнивания элементов: flex-start | flex-end | center | baseline | stretch

Чтобы stretch работал так, как вам нужно, высота элементов должна быть установлена на auto вместо определенной высоты.

Эта анимация показывает, как выглядят параметры:

Источник: Скотт Домс

Теперь мы будем использовать justify-content и align-items. Это покажет разницу между основными осями и поперечными осями.

Источник: Скотт Домс

Align Self

align-self позволяет настроить выравнивание одного элемента.

Он имеет все те же свойства align-items.

В следующей анимации родительский div имеет CSS align-items: center и flex-direction: row. Первые два квадрата циклически изменяют align-self значения.

Источник: Скотт Домс

Flex Wrap

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

Значением по умолчанию является flex-wrap: nowrap. Это заставит все оставаться в одном ряду слева направо.

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

flex-wrap: wrap-reverse также позволяет элементам перемещаться в следующую строку, но на этот раз элементы отображаются справа налево.

Flex Flow

flex-flow объединяет использование flex-wrap и flex-direction в одно свойство. Используется сначала путем установки направления, а затем обтекания. Вот пример: flex-flow: column wrap;

Align Content

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

Вот варианты: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Вертикальное центрирование с Flexbox

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

.parent {
    display: flex;
    align-items: center;
}

Игры и приложения

Если вы хотите попрактиковаться в использовании flexbox, попробуйте эти игры и приложения, которые помогут вам освоить flexbox.

  • Flexbox Defense – это веб-игра, в которой вы изучаете flexbox, пытаясь не дать врагам преодолеть вашу оборону.
  • Flexbox Froggy – это игра, в которой вы помогаете Froggy и друзьям, написав код CSS.
  • Flexyboxes – это приложение, которое позволяет просматривать примеры кода и изменять параметры, чтобы увидеть, как Flexbox работает визуально.
  • Flexbox Patters – это веб-сайт, демонстрирующий множество примеров Flexbox.

Вывод

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


Совершенствуй знания каждый день у нас в Телеграм-каналах

Вопросы, реклама — VK | Telegram