核心是父容器设display: flex，子项统一设flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0%），并清除width冲突、加min-width: 0防内容撑开，用gap替代margin控制间距。
在 Flex 布局中，让子项目按比例均分容器宽度，核心是结合 flex: 1（或等效写法）与容器的 display: flex，并确保没有干扰项（如固定宽高、margin、padding 或内容撑开）。
用 flex: 1 实现等宽分配
这是最常用且可靠的方式。给所有子项目统一设置 flex: 1，它们将平分容器剩余空间（忽略内容自身尺寸影响）：
-
flex: 1是flex-grow: 1、flex-shrink: 1、flex-basis: 0的简写，关键在于flex-basis: 0—— 它让项目起始“宽度为 0”，之后完全由flex-grow按比例分配空间 - 三个子项都设
flex: 1→ 各占 1/3；四个子项 → 各占 1/4 - 若想不等比（如 2:1:1），可分别设
flex: 2、flex: 1、flex: 1
避免常见干扰因素
即使写了 flex: 1，项目仍可能不等宽，往往是因为：
- 父容器没设
width或被内容撑开（建议显式设宽，如width: 100%或max-width） - 子项目有
min-width（默认是auto，会阻止压缩到过窄），可加min-width: 0强制允许收缩 - 子项内联元素（如文字、图片）未换行或溢出，可用
overflow: hidden或word-break: break-word控制 - 存在 margin/padding/border，会占用空间；建议用
box-sizing: border-box统一计算方式
替代方案：用 flex-basis + flex-grow
如果需要更精细控制（比如预留固定内边距或图标空间），可拆解写法：
-
flex: 1 1 200px表示：可增长、可收缩、基准宽 200px → 多个同值时仍等分剩余空间 -
flex: 1 1 0等价于flex: 1，语义更明确 - 慎用
flex: 1 1 auto——auto会让项目先按内容宽度渲染，再分配剩余空间，可能导致不均
响应式场景下的注意事项
在不同屏幕下保持等分，需配合媒体查询或现代方案：
- 用
flex-wrap: wrap+flex-basis控制换行后单行项目数（例如设flex-basis: calc(33.333% - 10px)配合 gap） - 推荐优先使用
gap替代 margin 分隔，它不参与 flex 分配计算，更干净 - 移动端小屏可设
flex-direction: column改为纵向堆叠，此时“等分宽度”自然转为“等分高度”逻辑
