那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<h2 data-id="heading-0">告别百分比计算：从文档流到 Flex 弹性布局的进化之路</h2>
<blockquote>
<p>在 CSS 的世界里，布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来越优雅。</p>
</blockquote>
<h3 data-id="heading-1">一、 随波逐流：HTML 文档流</h3>
<p>一切布局的起点，都是<strong>文档流（Document Flow）</strong> 。</p>
<p>HTML 元素默认就像水流一样：</p>
<ul>
<li><strong>块级元素 (display: block)</strong> ：如 div，霸道地独占一行，从上到下垂直排列。适合做容器，但无法并排。</li>
<li><strong>行内元素 (display: inline)</strong> ：如 span，顺从地从左到右排列，但它有个致命弱点——<strong>无法设置宽高</strong>，这让它不适合做布局容器。</li>
</ul>
<h3 data-id="heading-2">二、 进阶的烦恼：Inline-block 的爱与恨</h3>
<p>为了让元素既能并排（像 inline），又能设置宽高（像 block），开发者们曾大量使用 display: inline-block。</p>
<p>CSS</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.item {
display: inline-block;
width: 33.33%; /* 经典的百分比计算 */
}</pre>
</div>
<div>
<div>
<p>这种方案看似完美，实则暗藏玄机。</p>
<p><strong>它的痛点在于：</strong></p>
<ol>
<li><strong>计算繁琐</strong>：通过百分比（33.33%）凑成一行，永远无法达到真正的 100% 精确。</li>
<li><strong>幽灵空白节点</strong>：HTML 代码中的换行符会被浏览器解析为空格，导致原本计算好的布局莫名其妙换行。</li>
</ol>
<h3 data-id="heading-3">三、 降维打击：Flex 弹性布局</h3>
<p>为了解决上述痛点，CSS3 为我们带来了<strong>弹性布局（Flexbox）</strong> 。它不再关注具体的百分比，而是关注**“剩余空间”的分配**。</p>
<h4 data-id="heading-4">1. 开启上帝视角</h4>
<p>只需在父容器上声明一个属性，即可接管子元素的布局规则：</p>
<p>CSS</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.box {
display: flex; /* 开启弹性布局 */
/* 子元素默认变成“弹性项目”，且默认水平排列 */
}</pre>
</div>
<h4 data-id="heading-5">2. 核心魔法：flex: 1</h4>
<p>在提供的代码中，我们看到了这样一行关键代码：</p>
<p>CSS</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.item {
flex: 1; /* 核心代码 */
background-color: green;
}</pre>
</div>
<div>
<div>
<p><strong>flex: 1 到底做了什么？</strong></p>
<p>它相当于告诉浏览器：“不要管我原本有多宽，把父容器剩下的空间平均分给我。”</p>
<ul>
<li>如果有 3 个 .item，每个盒子自动获得 1/3 的宽度。</li>
<li>如果有 4 个 .item，每个自动获得 1/4 的宽度。</li>
</ul>
<p><strong>对比优势：</strong></p>
<ul>
<li><strong>无需计算</strong>：不需要手写 33.33% 或 25%。</li>
<li><strong>自动填充</strong>：无论增加还是减少子元素，布局自动填满整行，不会有缝隙，也不会溢出。</li>
</ul>
<h3 data-id="heading-6">四、 总结</h3>
<p>从 inline-block 到 flex，不仅仅是属性的变化，更是布局思维的转变。</p>
<ul>
<li><strong>传统布局</strong>：我们需要做算术题，小心翼翼地计算像素和百分比。</li>
<li><strong>弹性布局</strong>：我们将控制权交给浏览器，声明“分配规则”（如 flex: 1），让布局自动适应容器。</li>
</ul>
<p>前端开发就是这样，用最少的代码，实现最灵活的效果。下次布局时，记得给容器加一个 display: flex。</p>
</div>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19552152
頁:
[1]