CSS Flex 布局等宽步骤流程实现详解
在设计步骤流程的可视化界面时，我们常常需要将多个步骤项目平均分布在容器中，类似于 Flex 布局的 space-between 效果。然而，如果每个步骤项目都设置了 width: 100%，如何避免它们堆叠，并实现均匀分布呢？本文将详细解答这个问题。
假设您的 HTML 结构使用 Flex 布局构建步骤流程，每个步骤包含步骤编号、步骤名称和时间信息。 CSS 样式中，.steps 类设置了 Flex 布局，.step_right 类也使用了 Flex 布局。由于每个步骤项目都设置了 width: 100%，导致它们垂直堆叠，无法实现预期的等宽分布。
目标：在不修改步骤项目宽度的情况下，实现类似 space-between 的布局效果，即步骤项目在容器内均匀分布，两端对齐。
立即学习“前端免费学习笔记（深入）”；
解决方案：巧妙运用 flex-grow 属性
实现该效果的关键在于利用 Flex 布局的 flex-grow 属性。flex-grow 属性定义了项目在主轴方向上伸缩的比例。将 .step_right 类中元素的 flex-grow 属性设置为 1，即可让它们平均分配容器剩余空间。
只需在 .step_right 类的 CSS 样式中添加 flex-grow: 1;：
.step_right {
width: 100%;
display: flex;
flex-direction: column;
margin-left: 13px;
flex-grow: 1; /* 添加此行 */
.step_activated_text {
/* ... */
}
.step_time {
/* ... */
}
}
通过设置 flex-grow: 1;，每个 .step_right 元素将平均分配容器剩余空间，从而实现步骤项目均匀分布的效果。 这避免了直接修改 width 属性带来的复杂性和潜在的布局问题，保持了代码的简洁性和可维护性。
