Flex是已被主流浏览器完整支持、无需前缀的成熟布局方案，它以声明式语法直击垂直居中、容器包裹、等分布局、响应式切换等传统布局痛点，核心在于flex-grow/flex-shrink/flex-basis三属性协同及align-items与align-content的适用场景区分。
它不是“标准规范”，而是已被所有主流浏览器完整支持、无需前缀的成熟布局方案。2016年起，display: flex 就已稳定落地，现在写 flex-direction 或 justify-content 不用加 -webkit- 等前缀——这点本身，就是它成为事实标准的最硬凭据。
Flex解决的是传统布局里“必须绕弯子”的问题
比如垂直居中：position: absolute + transform: translate(-50%, -50%) 是 hack，display: table-cell 是语义错位，而 align-items: center 是直击本质的声明式控制。
- 浮动布局要手动
clear: both，否则父容器高度塌陷；Flex容器天然包裹子项，无此风险 - 等分布局靠
width: 33.33%+box-sizing: border-box容易因边框/内边距失准；flex: 1直接按剩余空间均分，不依赖像素计算 - 响应式切换方向：
@media里只需改一行flex-direction: column，不用重写整个结构
flex: 1 的行为比表面看起来更关键
它不是简单“填满”，而是三属性协同：flex-grow: 1（可放大）、flex-shrink: 1（可缩小）、flex-basis: 0%（忽略内容宽度）。这意味着：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 多个
flex: 1元素会严格均分容器剩余空间，哪怕内容长度差异很大 - 如果某元素设了
flex-shrink: 0，它就不会被压缩，其他项目会优先收缩——这是控制“最小宽度不破”的核心手段 -
flex-basis: auto（如flex: auto）会让项目先按内容宽度占位，再分配剩余空间，适合文本类区域
交叉轴对齐容易被低估，但实际高频使用
align-items 控制单行项目的交叉轴（默认是垂直方向），但要注意：
立即学习“前端免费学习笔记（深入）”；
- 当容器有多行（
flex-wrap: wrap）时，align-items只影响每行内部，跨行对齐要用align-content -
align-items: stretch是默认值，会让项目拉伸填满交叉轴——如果不想拉伸，必须显式设为flex-start或center - 项目级覆盖用
align-self，比如某一个按钮需要底部对齐，其他居中，就直接在该元素上写align-self: flex-end
真正卡住人的，往往不是“怎么写 Flex”，而是没意识到 flex-basis 的默认值是 auto 而不是 0，导致 flex: 1 在某些场景下不均分；或者忘了多行时 align-items 失效，转头去调 justify-content 白忙活。这些细节不踩一遍，很难说真正用熟了 Flex。
