Flex 和 Grid 什么时候用哪个？

一维排列（导航、列表、工具栏）用 Flex；二维网格（后台布局、图片墙）用 Grid。

为什么子项宽度不受控？

默认 flex-shrink:1 会压缩子项，设置 flex: 0 0 200px 可固定宽度。

垂直居中老办法和 Flex 哪个好？

Flex 一行搞定且响应式友好，新代码统一用 Flex。

间距用 margin 还是 gap？

gap 是现代标准，代码更干净；需兼容旧浏览器才用 margin。

flex:1 和 flex:auto 区别？

flex:1 基准为 0（完全均分），flex:auto 基准为内容大小（按内容比例分）。

CSS Flex 布局教程：在线生成 flex 代码

在线 CSS Flex 布局工具怎么用？可视化设置 flex 容器和子项属性，生成布局代码，告别手排布局。

CSS Flex 布局生成器能做什么？

Flex 布局是现代 CSS 排版的绝对主力：水平垂直居中、等分布局、自适应换行、导航栏、卡片列表——过去靠 float 和定位硬凑的布局，Flex 一行属性搞定。本工具可视化设置容器属性（主轴方向、对齐、换行等），实时预览效果，一键复制完整 CSS 代码。

使用步骤

打开 CSS Flex 布局生成器
选择主轴方向：row（水平）/ column（垂直）/ 反向
设置主轴对齐 justify-content：起点/居中/两端/均分
设置交叉轴对齐 align-items：起点/居中/拉伸
设置换行 flex-wrap：不换行/换行/反向换行
设置间距 gap
点击子元素单独设置 flex-grow/shrink/basis
复制容器+子元素的完整 CSS

核心属性速查

display: flex 开启弹性布局
flex-direction: row | column 主轴方向
justify-content: flex-start | center | space-between | space-around 主轴分配
align-items: flex-start | center | stretch 交叉轴对齐
flex-wrap: nowrap | wrap 是否换行
gap: 16px 子项间距（替代 margin 的现代方案）
flex: 1 让子项均分剩余空间
align-self 单独覆盖子项对齐

实战布局配方

水平垂直居中：display:flex; justify-content:center; align-items:center
导航栏：左 logo 右菜单——justify-content: space-between; align-items: center
等分三列：容器 flex + 子项 flex:1 + gap: 16px
自适应卡片流：flex-wrap: wrap + 子项 flex: 0 1 300px
底部按钮栏：margin-top: auto 把按钮推到底部
圣杯布局的移动端版：column + flex-grow 让主内容占满剩余高度

注意事项与边界情况

flex 子项的 float、clear、vertical-align 会失效，这是特性不是 bug
min-width: 0 解决子项内容溢出的常见问题（长文本、图片）
flex: 1 是 flex-grow:1 + flex-shrink:1 + flex-basis:0% 的缩写，注意与 flex:auto 区别
换行后 align-content 控制多行的行间距分布
复杂二维网格布局考虑 Grid：Flex 管一维、Grid 管二维

常见问题

Flex 和 Grid 什么时候用哪个？: 一维排列（导航、列表、工具栏）用 Flex；二维网格（后台布局、图片墙）用 Grid。
为什么子项宽度不受控？: 默认 flex-shrink:1 会压缩子项，设置 flex: 0 0 200px 可固定宽度。
垂直居中老办法和 Flex 哪个好？: Flex 一行搞定且响应式友好，新代码统一用 Flex。
间距用 margin 还是 gap？: gap 是现代标准，代码更干净；需兼容旧浏览器才用 margin。
flex:1 和 flex:auto 区别？: flex:1 基准为 0（完全均分），flex:auto 基准为内容大小（按内容比例分）。

实战案例：后台管理页的三栏布局

需求：960px 容器里做「320px 侧栏 + 16px 间距 + 自适应主区」。容器 display:grid 两列 320px 1fr、gap 16px，主区实得 960-320-16=624px——侧栏加间距加主区正好等于容器宽，这个加法闭合是布局自检的第一招。主区内部再用 Flex 排卡片：display:flex; gap:16px，卡片 flex:1 均分 624px。栅格外框、弹性内排，两种布局各司其职。

常见错误

主区放长英文串被撑破：不加 min-width:0，1fr 的最小宽度按内容算，整行布局崩掉
flex:1 和 flex:auto 混用：前者基准 0 完全均分，后者按内容比例分，同页混用宽度对不齐
给 flex 子项写 float 或 vertical-align：直接失效，别试图兼容旧写法
gap 放到不支持的老浏览器：布局粘连，必要时补 margin 兜底

进阶方向

自适应列数交给 Grid 的 repeat(auto-fill, minmax(280px, 1fr))，断点都不用写
容器查询（@container）做组件级响应式，比媒体查询更贴近真实需求
把侧栏+主区抽成布局组件，全站复用一套骨架
看懂 Flex/Gift 的分配算法后，读大厂组件库的布局源码会很轻松

总结

Flex 布局的精髓是「主轴 + 交叉轴」两个方向的对齐控制。生成器把属性变成选项，点选即出代码；背熟 justify-content 和 align-items 的组合，80% 的页面布局都能快速搭出来。

去使用 Flex 布局工具

Flex 布局教程