Flexbox布局生成器 - 在线弹性盒可视化生成

Flexbox（CSS Flexible Box Layout）是一种一维布局模型，专为解决复杂的对齐、分布和排列问题而生。它让容器内的子元素能够自动伸缩以适应可用空间。相比传统的浮动和定位，Flexbox能更优雅地处理元素在单一方向（行或列）上的布局，尤其适合组件级布局、导航栏、卡片排列、垂直居中、等分布局等场景。它是现代CSS布局的基石之一。

flex-direction 决定了主轴（main axis）的方向，所有flex子项沿主轴排列：
• row（默认）：主轴水平从左到右，子项横向排列
• row-reverse：主轴水平从右到左，子项反向排列
• column：主轴垂直从上到下，子项纵向排列
• column-reverse：主轴垂直从下到上
改变主轴方向后，justify-content始终控制主轴对齐，align-items始终控制交叉轴对齐。

这三个属性常常被混淆，实际上各有分工：
• justify-content：控制子项在主轴上的对齐与分布（水平方向在row模式下）
• align-items：控制所有子项在交叉轴上的对齐方式（单行内）
• align-content：仅在多行（flex-wrap: wrap）时生效，控制多行在交叉轴上的分布
简单记忆：justify管主轴，align-items管单行交叉轴，align-content管多行交叉轴。

这三者构成了 flex 简写属性的三个部分：
• flex-basis：子项的初始尺寸（在分配剩余空间之前）。设为auto则按内容大小，也可设为具体值如200px
• flex-grow：剩余空间的分配比例。0表示不增长，1表示等分剩余空间，数值越大分配越多
• flex-shrink：空间不足时的收缩比例。0表示不收缩，数值越大收缩越多
常用简写：flex: 1 等于 flex: 1 1 0%（等分所有空间）；flex: auto 等于 flex: 1 1 auto

Flexbox适合一维布局（单行或单列），如导航栏、工具栏、按钮组、卡片内元素排列、垂直居中对齐。它能优雅处理元素在单一方向上的伸缩。
CSS Grid适合二维布局（同时控制行和列），如页面整体布局、仪表盘、画廊、复杂网格系统。
实际开发中两者常配合使用：外层用Grid做页面结构，内层用Flexbox做组件内元素排列。两者并非替代关系，而是互补的布局工具。

Flexbox在现代浏览器中得到全面支持（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+）。IE11部分支持但存在已知bug（需加-ms-前缀）。截至2024年，全球浏览器对Flexbox的支持率超过98%。对于需要兼容IE的项目，建议使用Autoprefixer自动添加前缀，并注意IE11中flex-basis和min-height的已知问题。