В чём разница между justify-content и align-items?

justify-content расставляет элементы вдоль главной оси — направления, заданного flex-direction, то есть по горизонтали в строке и по вертикали в колонке. align-items работает с поперечной осью, перпендикулярной flex-direction. Перепутать их — самая частая ошибка с flexbox: если элементы выровнялись по вертикали, а нужна была горизонталь, скорее всего требуется другое свойство.

Почему align-items: stretch как будто ничего не меняет?

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

Что на самом деле меняет flex-wrap?

По умолчанию flex-элементы стараются уместиться в одну строку и сжимаются, из-за чего могут стать меньше своего естественного размера. flex-wrap: wrap позволяет элементам, которым не хватило места, перейти на новую строку — каждая строка ведёт себя как отдельный flex-контейнер. wrap-reverse делает то же самое, но новые строки добавляются сверху, а не снизу.

Использовать gap или margin для отступов между элементами?

Используйте gap. Он добавляет расстояние только между элементами, а не по внешним краям, поэтому не приходится отдельно убирать «лишний» отступ у последнего элемента. gap поддерживается во flexbox всех основных браузеров с 2021 года, так что причин выбирать margin по совместимости больше нет.

Чем flexbox отличается от CSS Grid?

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

Отправляется ли моя раскладка на сервер?

Нет. Каждая настройка обрабатывается на JavaScript прямо в вашей вкладке браузера. Ничего не загружается, не логируется и не сохраняется — закрыли вкладку, и всё исчезло.

Генератор CSS Flexbox — визуальная песочница

flex-direction

justify-content

align-items

flex-wrap

отступ 12px

элементы 5

display: flex;

Визуальная песочница для свойств CSS flexbox. Переключайте flex-direction, justify-content, align-items и flex-wrap, двигайте ползунок gap — и смотрите, как ряд блоков перестраивается в реальном времени. Когда раскладка выглядит так, как нужно, скопируйте готовое объявление контейнера прямо в таблицу стилей — больше не придётся угадывать нужную комбинацию свойств.

Как это работает

1
Выберите направление Задайте row или column для главной оси, либо один из reverse-вариантов, чтобы изменить порядок элементов, не трогая разметку.
2
Выровняйте элементы justify-content распределяет элементы вдоль главной оси, align-items — вдоль поперечной. Включите wrap, если элементы должны переноситься на новую строку вместо сжатия.
3
Задайте отступ и скопируйте Ползунок gap добавляет расстояние между элементами без трюков с margin. Скопируйте готовый CSS контейнера из блока под превью.

Ваши данные защищены

Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.

Часто задаваемые вопросы

В чём разница между justify-content и align-items?: justify-content расставляет элементы вдоль главной оси — направления, заданного flex-direction, то есть по горизонтали в строке и по вертикали в колонке. align-items работает с поперечной осью, перпендикулярной flex-direction. Перепутать их — самая частая ошибка с flexbox: если элементы выровнялись по вертикали, а нужна была горизонталь, скорее всего требуется другое свойство.
Почему align-items: stretch как будто ничего не меняет?: stretch — значение по умолчанию, и оно заметно только когда у элемента нет фиксированного размера по поперечной оси. Если у каждого элемента задана явная высота (в строке) или ширина (в колонке), растягивать уже нечего. Уберите фиксированный размер — и элементы заполнят контейнер.
Что на самом деле меняет flex-wrap?: По умолчанию flex-элементы стараются уместиться в одну строку и сжимаются, из-за чего могут стать меньше своего естественного размера. flex-wrap: wrap позволяет элементам, которым не хватило места, перейти на новую строку — каждая строка ведёт себя как отдельный flex-контейнер. wrap-reverse делает то же самое, но новые строки добавляются сверху, а не снизу.
Использовать gap или margin для отступов между элементами?: Используйте gap. Он добавляет расстояние только между элементами, а не по внешним краям, поэтому не приходится отдельно убирать «лишний» отступ у последнего элемента. gap поддерживается во flexbox всех основных браузеров с 2021 года, так что причин выбирать margin по совместимости больше нет.
Чем flexbox отличается от CSS Grid?: Flexbox одномерный — он выстраивает элементы вдоль одной строки или колонки и хорошо подходит для контента, который должен подстраиваться под свой размер, например для навигации или группы кнопок. Grid двумерный и удобен там, где нужен явный контроль и над строками, и над колонками сразу — например, для макета всей страницы или галереи изображений.
Отправляется ли моя раскладка на сервер?: Нет. Каждая настройка обрабатывается на JavaScript прямо в вашей вкладке браузера. Ничего не загружается, не логируется и не сохраняется — закрыли вкладку, и всё исчезло.

Из блога

CSS Flexbox: главная и поперечная ось и когда его применять Как на самом деле работает flexbox — главная и поперечная ось, justify-content против align-items, wrap, gap и когда лучше взять grid. Читать статью →

Генератор CSS Flexbox — визуальная песочница

Как это работает

Ваши данные защищены

Часто задаваемые вопросы

Из блога

Похожие инструменты