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

拿铁一勺糖

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

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

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

一、 随波逐流：HTML 文档流

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

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

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

二、 进阶的烦恼：Inline-block 的爱与恨

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

CSS

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

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

它的痛点在于：

1. 计算繁琐：通过百分比（33.33%）凑成一行，永远无法达到真正的 100% 精确。
2. 幽灵空白节点：HTML 代码中的换行符会被浏览器解析为空格，导致原本计算好的布局莫名其妙换行。

三、 降维打击：Flex 弹性布局

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

1. 开启上帝视角

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

CSS

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

2. 核心魔法：flex: 1

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

CSS

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

flex: 1 到底做了什么？

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

• 如果有 3 个 .item，每个盒子自动获得 1/3 的宽度。
• 如果有 4 个 .item，每个自动获得 1/4 的宽度。

对比优势：

• 无需计算：不需要手写 33.33% 或 25%。
• 自动填充：无论增加还是减少子元素，布局自动填满整行，不会有缝隙，也不会溢出。

四、 总结

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

• 传统布局：我们需要做算术题，小心翼翼地计算像素和百分比。
• 弹性布局：我们将控制权交给浏览器，声明“分配规则”（如 flex: 1），让布局自动适应容器。

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

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源：https://www.cnblogs.com/smileZAZ/p/19552152