Генератор CSS Flexbox
Работает локально в браузереСобирайте Flexbox-макеты визуально и копируйте CSS, HTML или Tailwind
Живой просмотр
Главная ось → · Поперечная ось ↓ · row / nowrap
Штриховка показывает промежутки gap: Между строками 12px · Между столбцами 12px
Код = позиция в HTML. order = CSS order, меняет только визуальное расположение.
3/24 · До 24 элементов.
Направляющие показывают оси, позицию в коде, CSS order и промежутки gap. Они никогда не экспортируются.
Сгенерированный код
.flex-container — правила контейнера; .flex-item-N — правила элемента N. Выбранный элемент: .flex-item-1.
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
Код обновляется по мере редактирования.
Работает локально в браузере. Настройки макета могут сохраняться в хранилище браузера на этом устройстве.
Генератор CSS Flexbox
Визуально создавайте макеты Flexbox и копируйте готовые CSS, HTML или классы Tailwind.
Как пользоваться
Выберите шаблон или настройте контейнер. Щёлкните элемент или выберите его клавиатурой, чтобы изменить flex-grow, flex-shrink, flex-basis, order и align-self. Добавляйте, удаляйте и переупорядочивайте элементы, затем копируйте или скачивайте CSS, HTML + CSS или Tailwind.
Наглядные подсказки
Направляющие рисуют главную и поперечную оси для текущего направления и переноса, подписывают у каждого элемента позицию в коде и CSS order и штрихуют промежутки gap между элементами и строками.
Ограничения и конфиденциальность
До 24 элементов. Длины принимают неотрицательные значения px, rem, em, %, vw и vh; calc() и произвольный CSS не допускаются. Просмотр предполагает горизонтальное письмо слева направо. Всё выполняется в браузере, настройки могут сохраняться в локальном хранилище.
