Flexbox
Классы для управления flexbox-контейнерами и элементами.
Контейнер
Заголовок раздела «Контейнер»| Класс | CSS | Описание |
|---|---|---|
.flex | display: flex | Включает flexbox |
.flex-col | flex-direction: column | Вертикальное направление |
.flex-col-reverse | flex-direction: column-reverse | Обратное вертикальное |
.flex-row | flex-direction: row | Горизонтальное направление |
.flex-row-reverse | flex-direction: row-reverse | Обратное горизонтальное |
.flex-wrap | flex-wrap: wrap | Перенос элементов |
.flex-nowrap | flex-wrap: nowrap | Без переноса |
Примеры контейнера
Заголовок раздела «Примеры контейнера»1
2
3
1
2
3
<div class="flex flex-col gap-4"> <div class="flex gap-2 p-3 bg-gray-50 rounded border"> <div class="bg-primary-100 p-3 rounded">1</div> <div class="bg-primary-100 p-3 rounded">2</div> <div class="bg-primary-100 p-3 rounded">3</div> </div> <div class="flex-col gap-2 p-3 bg-gray-50 rounded border"> <div class="bg-primary-100 p-3 rounded">1</div> <div class="bg-primary-100 p-3 rounded">2</div> <div class="bg-primary-100 p-3 rounded">3</div> </div></div>Выравнивание (Alignment)
Заголовок раздела «Выравнивание (Alignment)»По вертикали (items)
Заголовок раздела «По вертикали (items)»| Класс | CSS | Описание |
|---|---|---|
.items-start | align-items: flex-start | По верхнему краю |
.items-center | align-items: center | По центру |
.items-end | align-items: flex-end | По нижнему краю |
.items-baseline | align-items: baseline | По базовой линии |
.items-stretch | align-items: stretch | Растянуть |
items-start
1
2
items-center
1
2
items-end
1
2
<div class="flex flex-col gap-4"> <div> <div class="text-sm text-gray-600 mb-2">items-start</div> <div class="flex items-start h-24 border border-gray-200 rounded bg-gray-50 gap-2 p-2" > <div class="bg-primary-100 p-3 rounded">1</div> <div class="bg-primary-100 p-3 rounded">2</div> </div> </div> <div> <div class="text-sm text-gray-600 mb-2">items-center</div> <div class="flex items-center h-24 border border-gray-200 rounded bg-gray-50 gap-2 p-2" > <div class="bg-primary-100 p-3 rounded">1</div> <div class="bg-primary-100 p-3 rounded">2</div> </div> </div> <div> <div class="text-sm text-gray-600 mb-2">items-end</div> <div class="flex items-end h-24 border border-gray-200 rounded bg-gray-50 gap-2 p-2" > <div class="bg-primary-100 p-3 rounded">1</div> <div class="bg-primary-100 p-3 rounded">2</div> </div> </div></div>По горизонтали (justify)
Заголовок раздела «По горизонтали (justify)»| Класс | CSS | Описание |
|---|---|---|
.justify-start | justify-content: flex-start | По левому краю |
.justify-center | justify-content: center | По центру |
.justify-end | justify-content: flex-end | По правому краю |
.justify-between | justify-content: space-between | Между элементами |
.justify-around | justify-content: space-around | Вокруг элементов |
.justify-evenly | justify-content: space-evenly | Равномерно |
justify-between
1
2
justify-center
1
2
<div class="flex flex-col gap-4"> <div> <div class="text-sm text-gray-600 mb-2">justify-between</div> <div class="flex justify-between gap-2 border border-gray-200 rounded bg-gray-50 p-2" > <div class="bg-primary-100 p-2 rounded">1</div> <div class="bg-primary-100 p-2 rounded">2</div> </div> </div> <div> <div class="text-sm text-gray-600 mb-2">justify-center</div> <div class="flex justify-center gap-2 border border-gray-200 rounded bg-gray-50 p-2" > <div class="bg-primary-100 p-2 rounded">1</div> <div class="bg-primary-100 p-2 rounded">2</div> </div> </div></div>Gap (Отступы между элементами)
Заголовок раздела «Gap (Отступы между элементами)»Доступные значения: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, auto
| Класс | Описание |
|---|---|
.gap-0 | Без отступа (0) |
.gap-1 | Отступ 4px |
.gap-2 | Отступ 8px |
.gap-3 | Отступ 12px |
.gap-4 | Отступ 16px |
.gap-5 | Отступ 20px |
.gap-6 | Отступ 24px |
.gap-8 | Отступ 32px |
.gap-10 | Отступ 40px |
.gap-auto | Автоматический отступ |
gap-y и gap-x
Заголовок раздела «gap-y и gap-x»| Класс | Описание |
|---|---|
.gap-y-* | Отступ только по вертикали (row-gap) |
.gap-x-* | Отступ только по горизонтали (column-gap) |
gap-1 (4px)
1
2
3
gap-4 (16px)
1
2
3
gap-8 (32px)
1
2
3
<div class="flex flex-col gap-4"> <div> <div class="text-sm text-gray-600 mb-2">gap-1 (4px)</div> <div class="flex gap-1 border border-gray-200 rounded bg-gray-50 p-2"> <div class="bg-primary-100 p-2 rounded text-xs">1</div> <div class="bg-primary-100 p-2 rounded text-xs">2</div> <div class="bg-primary-100 p-2 rounded text-xs">3</div> </div> </div> <div> <div class="text-sm text-gray-600 mb-2">gap-4 (16px)</div> <div class="flex gap-4 border border-gray-200 rounded bg-gray-50 p-2"> <div class="bg-primary-100 p-2 rounded">1</div> <div class="bg-primary-100 p-2 rounded">2</div> <div class="bg-primary-100 p-2 rounded">3</div> </div> </div> <div> <div class="text-sm text-gray-600 mb-2">gap-8 (32px)</div> <div class="flex gap-8 border border-gray-200 rounded bg-gray-50 p-2"> <div class="bg-primary-100 p-2 rounded">1</div> <div class="bg-primary-100 p-2 rounded">2</div> <div class="bg-primary-100 p-2 rounded">3</div> </div> </div></div>Flex элементы
Заголовок раздела «Flex элементы»| Класс | CSS | Описание |
|---|---|---|
.flex-0 | flex: 0 0 auto | Не растягивается |
.flex-auto | flex: 1 1 auto | Автоматически |
.flex-1 | flex: 1 | Занимает всё место |
.flex-none | flex: none | Запрет растяжения |
flex-0
flex-1 (растягивается)
flex-0
<div class="flex gap-2 border border-gray-200 rounded bg-gray-50 p-2 h-24"> <div class="flex-0 bg-primary-100 p-3 rounded"> <span class="text-xs">flex-0</span> </div> <div class="flex-1 bg-primary-200 p-3 rounded"> <span class="text-xs">flex-1 (растягивается)</span> </div> <div class="flex-0 bg-primary-100 p-3 rounded"> <span class="text-xs">flex-0</span> </div></div>Примеры использования
Заголовок раздела «Примеры использования»Хедер с навигацией
Заголовок раздела «Хедер с навигацией»Логотип
<div class="flex justify-between items-center p-4 bg-white border border-gray-200 rounded"> <span class="text-lg font-bold text-primary-500">Логотип</span> <nav class="flex gap-4"> <a href="#" class="text-gray-600 hover:text-primary-500">О нас</a> <a href="#" class="text-gray-600 hover:text-primary-500">Продукты</a> <a href="#" class="text-gray-600 hover:text-primary-500">Контакты</a> </nav></div>Карточка с футером
Заголовок раздела «Карточка с футером»Заголовок
Описание
$99.99
<div class="border border-gray-200 rounded overflow-hidden bg-white max-w-96"> <div class="h-32 bg-primary-100"></div> <div class="p-4"> <h3 class="text-lg font-bold text-gray-900 mb-2">Заголовок</h3> <div class="text-gray-600 text-sm">Описание</div> </div> <div class="flex justify-between items-center px-4 py-3 bg-gray-50 border-t border-gray-200" > <span class="text-primary-500 font-bold">$99.99</span> <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded text-sm" > <p>Купить</p> </button> </div></div>Центрирование
Заголовок раздела «Центрирование»По центру
Flexbox центрирование
<div class="flex items-center justify-center h-48 bg-gray-100 rounded border border-gray-200"> <div class="bg-white border border-gray-200 rounded p-6 text-center"> <div class="font-bold text-gray-900">По центру</div> <div class="text-sm text-gray-600">Flexbox центрирование</div> </div></div>