使用flex:1可实现等分列布局，通过flex-grow、flex-shrink和flex-basis控制空间分配，结合min-width:0防止内容撑破，适用于响应式设计。
要在CSS中实现Flexbox等分列布局，核心是合理使用 flex-basis、flex-grow 和 flex-shrink 属性。这些属性共同决定了弹性子项在容器中的空间分配方式，能灵活控制列宽的伸缩行为。
理解 flex 简写属性的含义
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式，语法为：
flex: [flex-grow] [flex-shrink] [flex-basis];例如：
- flex: 1 等价于 flex: 1 1 0%；子项将平均分配剩余空间，但可能压缩。
- flex: 1 1 auto 表示可增长、可收缩，基础尺寸基于内容。
- flex: 0 0 25% 表示不增长不收缩，固定宽度为25%。
实现等分列的常用方案
要让多个子元素在一行中等宽分布，最简单有效的方法是设置相同的 flex 值。
立即学习“前端免费学习笔记（深入）”；
- 将父容器设为 display: flex。
- 子元素设置 flex: 1，即可自动均分可用空间。
例如四个等分列：
.container { display: flex; }.item { flex: 1; }
每个 .item 将占据 25% 容器宽度，无论内容多少。
使用 flex-basis 控制初始宽度
当需要更精确控制起始宽度时，可显式设置 flex-basis。
- flex: 1 1 200px：子项从 200px 开始，可增长也可收缩。
- flex: 0 0 33.33%：三等分布局，固定宽度不伸缩，适合卡片或栅格系统。
这种写法适合响应式设计中，希望列宽有明确基准值的场景。
避免文字撑破等分布局的小技巧
有时内容过长会导致等分布局失效，尤其是英文或连续字符。解决方法：
- 给子项添加 min-width: 0 或 overflow: hidden。
- 确保 flex-shrink 可用（默认为1），允许压缩。
因为默认情况下 flex items 的最小尺寸受内容限制，加上 min-width: 0 可打破这一限制。
基本上就这些。掌握 flex 的三个子属性，就能自由控制等分列的行为，适应各种布局需求。关键是根据是否需要伸缩来选择合适的组合。
