前端工具 · CSS

Flexbox 可视化

可视化调试 CSS Flexbox 布局：拖拽调整容器与子元素属性，实时生成 CSS 代码。

flex-direction

justify-content

align-items

flex-wrap

gap (px)

1

2

3

生成的 CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

子元素属性

点击预览区中的元素进行选中编辑

Item 1

flex-grow

flex-shrink

flex-basis

order

align-self

Item 2

flex-grow

flex-shrink

flex-basis

order

align-self

Item 3

flex-grow

flex-shrink

flex-basis

order

align-self