PocketPlay
EN

Flexbox 布局生成器

在实时预览中调试所有 flex 容器与子项属性，一键复制 CSS 与 HTML。

🔒 浏览器本地运行，文件不会上传免费 · 无需注册

预览 — 点击某个子项即可编辑

容器属性

常用布局

选中的子项

CSS 代码


    

    

      
HTML 代码

        

      

    

  




怎么用 Flexbox 布局生成器
  1. 先设置容器属性——主轴方向、是否换行以及两个方向的对齐方式，预览会实时变化。
  2. 点击预览中的任意子项，就能单独给它设置 grow、shrink、basis、order 或 align-self。
  3. 布局满意后复制 CSS 和对应的 HTML。
常见问题
justify-content 和 align-items 有什么区别？
justify-content 作用在主轴上（flex-direction: row 时是水平方向），align-items 作用在交叉轴上。切换成 column 之后，两者控制的视觉方向就会互换。
align-content 什么时候才有效？
只有当子项换行成多行、并且容器高度大于这些行所需高度时才有效。设置 flex-wrap: nowrap 时它完全不起作用。
flex-basis 该怎么填？
auto 表示用子项自身的宽或高；写成 200px 这样的长度表示在放大/收缩之前的起始尺寸；写 0 则让 grow 分配整个容器空间，子项会严格按比例分配。


  


  

    
    

          
            
            
              CSS 渐变生成器HOT
              可视化制作线性、径向、锥形 CSS 渐变，一键复制 CSS、Tailwind 类名或导出 SVG。
            
          
          
            
            
              CSS 滤镜生成器
              用滑块实时调节模糊、亮度、对比度、色相、投影等效果，一键复制 CSS filter 代码。
            
          
          
            
            
              CSS 动画生成器
              可视化生成 @keyframes 动画，内置贝塞尔缓动曲线编辑器、常用动效预设和实时预览。
            
          
          
            
            
              CSS 阴影生成器
              可视化叠加多层 box-shadow，内置 Material 高度与新拟态预设，实时预览并复制 CSS。
            
          
          
            
            
              CSS 圆角生成器
              拖动八个控制点自由调整每个圆角，包括不规则的“blob”形状，一键复制 border-radius 代码。
            
          
          
            
            
              在线取色器HOT
              用饱和度方块、色相与透明度滑块取色，同时查看 HEX/RGB/HSL/HSV/CMYK 并检测 WCAG 对比度。
            
          
          
            
            
              颜色格式转换
              粘贴任意颜色（名称、hex、rgb、hsl、hwb、lab、lch、oklch、cmyk），立刻得到所有其他格式。
            
          
          
            
            
              CSS Grid 布局生成器
              可视化设计 CSS Grid 布局：设置轨道尺寸与间距，拖选单元格命名区域，复制容器 CSS 与 HTML。
            
          
    

    
全部工具 →