🎯 Flexbox 布局生成器

可视化调节属性，实时预览并生成 CSS

拖动滑块或切换选项实时预览

↓ 生成的 CSS


    




    

        
🎯 可视化布局

        
所有 Flex 容器属性实时联动预览。

        
12 项属性实时预览一键复制响应式建议

    

    

        
💡 使用技巧

        
    
            
  • 水平居中：justify-content + align-items 都选 center
    • 
            
  • 等宽分栏：子项 grow 设 1，basis 设 0
    • 
            
  • gap 是现代间距方案，替代旧 margin 写法
    • 
        

    

    

        
✨ 绘萤者

        
以萤火之光，绘万千想象

        
完全免费开源精神极客风范协作共创

        
绘萤者——探索真正的互联网精神，创造更有意义的互联网。