Считается локально

Песочница Flexbox

Направление, перенос, выравнивание и промежуток.

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;

Экспорт и импорт доступны после входа в аккаунт. Войти

Блоки на странице следуют CSS рядом с ними.

Об инструменте

Быстрая наглядная подсказка по распространённой раскладке flexbox. Блоки на странице следуют CSS, показанному рядом; измените gap и скопируйте правила в проект.

Как пользоваться

01
Задайте отступ между элементами.
02
Посмотрите, как перестраиваются блоки.
03
Скопируйте CSS flexbox.

FAQ

Частые вопросы

Какие свойства flex используются?

display: flex с направлением row, переносом, justify-content: space-between, align-items: center и заданным gap.

Когда лучше grid?

Flexbox — для одномерных рядов или колонок, CSS grid — когда нужны строки и колонки одновременно.

Как пользоваться

Частые вопросы

Рядом на стенде