通过设置父容器display: flex和子元素flex: 1，可让子元素自动等宽填充容器，适用于按钮组或卡片布局。
在CSS中，使用Flexbox让子元素自动填充容器是一个常见需求，可以通过几个关键属性轻松实现。核心在于设置父容器为弹性布局，并调整子元素的伸缩行为。
1. 设置父容器为flex布局
要让子元素能够自动填充，首先需要将父元素的display属性设为flex，这样它就成为一个弹性容器。
示例：
div.container {display: flex;
}
2. 子元素等宽填充（平均分配空间）
如果希望所有子元素平分容器宽度，可以设置它们的flex-grow为1，表示它们会等比例扩展以填满剩余空间。
立即学习“前端免费学习笔记（深入）”；
说明：
- flex-grow: 1：允许子元素扩展
- flex-shrink: 1：允许收缩（默认值）
- flex-basis: 0 或省略：从0开始分配空间更利于均分
推荐写法：
.container > div {
flex: 1;
}
这相当于flex: 1 1 0%，多个子元素会自动均分容器空间。
3. 控制主轴方向和换行（可选）
默认主轴是水平方向（row）。如需垂直排列：
.container {flex-direction: column;
}
若子元素过多希望换行：
.container {flex-wrap: wrap;
}
4. 实际应用场景示例
比如创建一个等宽按钮组或卡片布局：
<div class="btn-group"><button>选项1</button>
<button>选项2</button>
<button>选项3</button>
</div> .btn-group {
display: flex;
}
.btn-group button {
flex: 1;
padding: 10px;
}
三个按钮将自动等宽填满父容器。
基本上就这些。只要父容器启用display: flex，子元素使用flex: 1，就能实现自动填充效果，灵活又简洁。
