Flexbox Playground

Visually debug Flexbox layout properties

Flexbox Playground is a free online Developer tool. Visually debug Flexbox layout properties Related terms: css · flexbox · flex · 布局 · justify · align. Use it on this page without signing in.

1
2
3
4
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}
Help

使用说明

  1. 调整容器属性：flex-direction、justify-content、align-items、flex-wrap
  2. 调整子项属性：flex-grow、align-self 等
  3. 实时预览布局变化
  4. 一键复制生成的 CSS 代码

常见问题

  • 数据处理安全吗？ 全程浏览器本地处理，不联网
  • 属性不生效？ 注意父容器需设置 display: flex
  • 移动端兼容？ 现代浏览器全面支持 Flexbox

More Developer

View all

JSON Formatter

Format, minify, validate JSON, convert to Go struct / TS interface

JSON Field Search

Search JSON by field, value or path with highlights, supports jq expressions

Timestamp Converter

Convert between Unix timestamps and dates, seconds and milliseconds

Cron Expression

Generate and parse cron expressions, preview next run time

UUID Generator

Generate UUID v4 / v7 / ULID / NanoID

Hash Calculator

Compute MD5 / SHA1 / SHA256 / SHA512 of text or files

JWT Decoder

Decode JWT header and payload, view expiry time

URL Encoder / Decoder

Encode and decode URL / URI components

FAQ about Flexbox Playground

What can Flexbox Playground do?

Flexbox Playground is a Developer tool. Visually debug Flexbox layout properties You can finish the job on this page.

Who should use Flexbox Playground?

Anyone handling css · flexbox · flex · 布局 · justify · align who does not want to install desktop software can use Flexbox Playground in the browser.

Is Flexbox Playground safe? Is my data uploaded?

This tool runs in your browser. We do not collect the content you enter into Flexbox Playground just because you used it.

What similar tools exist?

Related tools in the same Developer group are listed at the bottom of this page.