那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了

告别百分比计算：从文档流到 Flex 弹性布局的进化之路

在 CSS 的世界里，布局方式的演进就像是一场对"控制权"的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来越优雅。

一切布局的起点，都是文档流（Document Flow） 。

HTML 元素默认就像水流一样：

块级元素 (display: block) ：如 div，霸道地独占一行，从上到下垂直排列。适合做容器，但无法并排。
行内元素 (display: inline) ：如 span，顺从地从左到右排列，但它有个致命弱点------无法设置宽高，这让它不适合做布局容器。

为了让元素既能并排（像 inline），又能设置宽高（像 block），开发者们曾大量使用 display: inline-block。

CSS

css 复制代码

.item {
    display: inline-block;
    width: 33.33%; /* 经典的百分比计算 */
}

这种方案看似完美，实则暗藏玄机。

它的痛点在于：

为了解决上述痛点，CSS3 为我们带来了弹性布局（Flexbox） 。它不再关注具体的百分比，而是关注**"剩余空间"的分配**。

只需在父容器上声明一个属性，即可接管子元素的布局规则：

CSS

css 复制代码

.box {
    display: flex; /* 开启弹性布局 */
    /* 子元素默认变成"弹性项目"，且默认水平排列 */
}

在提供的代码中，我们看到了这样一行关键代码：

CSS

css 复制代码

.item {
    flex: 1; /* 核心代码 */
    background-color: green;
}

flex: 1 到底做了什么？

它相当于告诉浏览器："不要管我原本有多宽，把父容器剩下的空间平均分给我。"

对比优势：

从 inline-block 到 flex，不仅仅是属性的变化，更是布局思维的转变。

前端开发就是这样，用最少的代码，实现最灵活的效果。下次布局时，记得给容器加一个 display: flex。