使用flex:1可让子元素等分容器宽度，父容器需设display:flex；固定宽与弹性宽可混合布局；配合box-sizing:border-box和min-width优化显示效果。
在使用 CSS Flexbox 布局时，让子元素等分容器宽度是一个非常常见的需求。实现方式简单且兼容性良好，关键是正确设置 flex 属性和父容器的 display: flex。
1. 基础等分：使用 flex: 1
当所有子元素设置 flex: 1 时，它们会平均分配父容器的可用空间。
示例：
HTML:
<div class="container">
<div class="item">项1</div>
<div class="item">项2</div>
<div class="item">项3</div>
</div>
CSS:
.container {
display: flex;
}
.item {
flex: 1;
}
三个子元素将平分容器宽度，无论内容多少。
2. 部分等分：混合固定与弹性宽度
有时需要某些子元素固定宽度，其余等分剩余空间。
立即学习“前端免费学习笔记（深入）”；
技巧：- 固定宽度项使用具体值如 width: 100px 或 flex: 0 0 100px
- 弹性项保持 flex: 1
例如：一个侧边栏固定宽，主区域占剩余空间。
3. 等分但保留内边距或边框
若子元素有 padding 或 border，可能影响布局表现。建议：
- 给父容器添加 box-sizing: border-box
- 确保所有元素统一使用 *, *::before, *::after { box-sizing: border-box }
这样宽度计算更可控，避免溢出。
4. 控制最小宽度：防止压缩过度
默认情况下，flex 项在空间不足时会被压缩。可通过设置 min-width: 0 或指定最小宽度来优化。
推荐做法：- 若内容较长，设 min-width: 0 允许压缩
- 若需保护内容，用 min-width: 100px 等具体值
基本上就这些。只要父容器是 display: flex，子元素用 flex: 1，就能轻松实现等分。灵活搭配 flex 属性可应对各种布局场景。
