Песочница CSS flexbox
Наглядно показывает выравнивание, перенос и интервалы.
Как использовать Песочница CSS flexbox
CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.
- Введите запрошенные значения в панели настроек.
- Настройте основные параметры, затем откройте расширенный режим для экспорта и точной настройки. Пользовательские настройки остаются активными при закрытии панели.
- Запустите «Песочница CSS flexbox», просмотрите результат и используйте доступные элементы копирования или скачивания.
Что поддерживает этот инструмент
Наглядно показывает выравнивание, перенос и интервалы.
- Направление
- row · column · row-reverse · column-reverse
- Выравнивание по главной оси
- flex-start · center · flex-end · space-between · space-around · space-evenly
- Выравнивание по поперечной оси
- stretch · flex-start · center · flex-end
- Перенос
- wrap · nowrap
- Промежуток (px)
- Range: 0 to 100
- Элементы
- Range: 1 to 30
Ограничения и обработка
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.
Частые вопросы
What is the difference between space-between, space-around and space-evenly?
space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.
Why does align-items seem to do nothing in the flexbox preview?
align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.
Does the flexbox playground set flex properties on the items?
No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.
Где обрабатываются мои данные?
Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.
Каковы ограничения входных данных?
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.