在 flex 布局里添加 flex: 1; 和 width: 0; 能保留元素空间的原因

在前端开发中，Flexbox（Flexible Box），即弹性布局模型，是一种用于为盒状模型提供最大灵活性的 CSS 布局模式。在使用 flex 布局时，添加 flex: 1; 和 width: 0; 这两个属性组合能够起到保留元素空间的奇妙效果，下面我们就来深入探究其中的原因。

flex: 1; 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的缩写形式。其中，flex-grow 定义元素的放大比例，值为 1 表示该元素会根据剩余空间按比例进行放大；flex-shrink 定义元素的缩小比例，值为 1 意味着当空间不足时，该元素会按比例缩小；flex-basis 设置元素在主轴上的初始大小，这里值为 0，表示元素初始大小为 0。

而 width: 0; 进一步明确了元素在水平方向上的宽度初始值为 0。那么为什么这样的组合能保留元素空间呢？

这是因为 flex: 1; 中的 flex-grow 和 flex-shrink 赋予了元素在布局中的动态伸缩能力。尽管 flex-basis 和 width 都设置为 0，但只要父容器有剩余空间，由于 flex-grow: 1; 的作用，元素就会根据自身 flex-grow 的值按比例分配并占据空间。当空间不足时，flex-shrink: 1; 又能确保元素按比例缩小，以适应布局需求。

这种特性在很多场景下都非常实用。比如在制作响应式导航栏或者卡片列表时，我们希望各个元素能够根据可用空间自动分配大小，同时又能保证元素的基本结构和空间存在。通过使用 flex: 1; 和 width: 0; 的组合，就能轻松实现这一效果，使得页面在不同屏幕尺寸和设备上都能保持良好的布局和用户体验。

深入理解 flex: 1; 和 width: 0; 在 flex 布局中的作用原理，能够帮助前端开发者更加灵活高效地进行页面布局设计。