Создавайте идеальные макеты флексбоксов

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

display

flex-direction

flex-wrap

justify-content

align-items

align-content

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

Items

3 items

Выбранный товар

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

Сгенерированный CSS-код

Примеры из реальной жизни

Панель навигации

Logo

Home

Products

About

Contact

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

Card Grid

Название карты

Текст описания карты здесь

Название карты

Текст описания карты здесь

Название карты

Текст описания карты здесь

Адаптивная сетка карточек, которая адаптируется к различным размерам экрана с помощью свойств flexbox.

Верстка статьи

Название статьи

Опубликовано 1 января, 2023 · 5 мин. чтения

Содержание статьи здесь. Это может быть краткое резюме или полный текст статьи. Flexbox помогает выровнять изображение и текст визуально привлекательным образом.

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

Макет приборной панели

Header

Sidebar

Основное содержание

Footer

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

Основы Flexbox

Что такое Flexbox?

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

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Ключевые понятия:Flexbox вводит две основные концепции:Флекс-контейнер and the Изделия Flex. Контейнер является родительским элементом, а элементы — его прямыми дочерними элементами.

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

Макеты флексбоксов основаны на двух осях:main axis and the поперечная ось.

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

Главная ось →

← Поперечная ось

Start

Main

End

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

Property	Description
`display`	Определяет контейнер flex; inline или block в зависимости от заданного значения.
`flex-direction`	Устанавливает главную ось, тем самым определяя направление размещения flex-элементов в flex-контейнере.
`flex-wrap`	По умолчанию все элементы flex будут пытаться уместиться в одной строке. Вы можете изменить это и разрешить перенос элементов по мере необходимости с помощью этого свойства.
`justify-content`	Выравнивает элементы flex по главной оси текущей строки контейнера flex.
`align-items`	Выравнивание flex-элементов по поперечной оси текущей строки flex-контейнера.
`align-content`	Выравнивает линии контейнера flex при наличии дополнительного пространства на поперечной оси.

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

Property	Description
`order`	По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее,`order`Свойство управляет порядком их отображения в контейнере Flex.
`flex-grow`	Определяет возможность роста гибкого элемента при необходимости. Он принимает безединичную величину, которая служит пропорцией.
`flex-shrink`	Определяет возможность сжатия flex-элемента при необходимости.
`flex-basis`	Определяет начальный размер flex-элемента до того, как любое доступное пространство будет распределено в соответствии с гибкими коэффициентами.
`align-self`	Допускает выравнивание по умолчанию (или то, которое указано в`align-items`), чтобы быть переопределенным для отдельных элементов гибких схем.