理 理悟万池
`⌘K`

全部工具

前端工具 · 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