Flexbox布局生成器是一款免费在线工具，帮助前端开发者可视化配置CSS Flexbox属性并实时预览效果。支持容器属性（flex-direction、justify-content、align-items、flex-wrap、align-content、gap）和子项属性（flex-grow、flex-shrink、flex-basis、align-self、order）的完整配置，一键生成可复制使用的CSS代码。
flex-direction 定义主轴方向：row（默认水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
justify-content 定义主轴上子项的对齐方式：flex-start、center、flex-end、space-between、space-around、space-evenly。
align-items 定义交叉轴上子项的对齐方式：flex-start、center、flex-end、stretch、baseline。
flex-wrap 定义是否换行：nowrap（默认不换行）、wrap、wrap-reverse。
align-content 定义多行时的行对齐方式：flex-start、center、flex-end、space-between、space-around、stretch。
gap 定义子项之间的间距。
flex-grow 定义子项的放大比例；flex-shrink 定义缩小比例；flex-basis 定义子项在主轴上的初始大小；align-self 单独定义子项在交叉轴上的对齐方式；order 定义子项的排列顺序。
是的，完全免费。纯前端实现，所有计算都在浏览器本地完成，无需注册登录。
支持所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。IE11 不支持 Flexbox。
不会。所有操作都在浏览器本地完成，不会上传任何数据到服务器，断网也能正常使用。
圣杯布局是一种经典的网页布局方式，中间内容区域自适应宽度，两侧边栏固定宽度。通过设置中间子项 flex-grow: 1 实现自适应扩展。
flex-grow 定义了子项在剩余空间中的放大比例，flex-shrink 定义了子项在空间不足时的缩小比例。两者共同决定了子项的伸缩行为。