使用 display: flex 配合 flex: 1 可实现子元素等宽均分容器空间，通过 gap 属性添加间隙避免影响布局，结合 min-width: 0 防止内容溢出，支持固定宽度与自适应混合模式，适用于导航栏、卡片布局等常见场景。
在CSS中实现Flex等宽布局，让子元素自动均分容器空间，是现代网页布局的常见需求。通过 Flexbox 强大的弹性分配能力，可以轻松实现子元素自适应宽度并均匀分布。
使用 display: flex 实现等宽布局
将父容器设置为 display: flex，子元素会默认沿主轴排列。为了让每个子元素等宽并填满容器，关键在于控制子元素的 flex 属性。
基本结构如下：
.container {
display: flex;
}
<p>.item {
flex: 1;
}</p>其中 flex: 1 相当于 flex-grow: 1, flex-shrink: 1, flex-basis: 0%，表示所有子元素平分剩余空间，实现等宽效果。
处理间距与边距的技巧
如果子元素之间需要间隔，不推荐使用 margin 直接添加间隙，因为它会影响等宽计算。更优的做法是使用 gap 属性：
.container {
display: flex;
gap: 10px;
}
<p>.item {
flex: 1;
}</p>gap 是 Flex 和 Grid 布局中的专用间距属性，不会破坏子元素的弹性分配逻辑，能保持等宽的同时自然留出空隙。
控制最小宽度避免内容溢出
当内容较长时，子元素可能因 flex-basis: 0 导致文本被压缩或换行异常。可通过设置 min-width: 0 配合 flex 来解决：
.item {
flex: 1;
min-width: 0;
word-break: break-all;
}
同时，给容器添加 min-width: 0（若父级为 flex 子项）可启用内部内容的收缩行为，防止布局撑开。
固定部分子项宽度，其余自适应
有时需要某些子元素固定宽度，其余自动填充。例如一个侧边栏固定，其他区域自适应：
.sidebar {
flex: 0 0 200px; /* 不增长、不收缩、基础宽度200px */
}
<p>.main {
flex: 1; /<em> 剩余空间全由它填充 </em>/
}</p>这种混合模式非常实用，适用于导航+内容区等常见布局场景。
基本上就这些。用 display: flex 搭配 flex: 1 和 gap，就能高效实现等宽自适应布局，灵活又稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
