Flex 子项的 100% 宽度是如何计算的？

Question

当我将.sidebar宽度设置为 100% 时，它会比以前变小。

然而，当我移除 bodyfont-size: 1.3rem并切换.sidebars时width: 100%，它会变得稍微大一些。

我知道当我们将 font-size 设置为 1.3rem 时，.primary-content的水平宽度（如果不换行）仍应与 的.sidebar宽度（如果不换行）具有相同的比例。

所以我不确定flexbox如何计算宽度：100%

body {
  font-size: 1.3rem;
}

h1 {
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  display: flex;
}

.primary-content {
  background-color: moccasin;
}

.sidebar {
  /* width: 100%; */
  padding: 1em;
  text-align: center;
  color: #fff;
  background-color: #136c72;
}

<main class="main container row">
  <section class="primary-content">
    <h2>Quality designs made custom, on demand, just for you</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </section>
  <aside class="sidebar">
    <h2>Cheap</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </aside>
</main>

这是代码笔。

https://codepen.io/Fullchee/pen/OJMBovq

Answer 1

这里的一切都与初始宽度有关。为了理解这一点，让我们用更少的代码来看另一个简单的例子：

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
}

<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>


<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div style="width:100%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>

这是微不足道的，第二种情况看起来有点奇怪，因为宽度减小了，但这是合乎逻辑的。

首先，您应该注意到两个元素具有相同的内容，并且内容需要包装在每个元素内，因为没有足够的空间。

如果我们减少内容，情况就会有所不同：

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
}

<div class="box">
  <div>
    Lorem ipsum dolor sit amet, 
  </div>
  <div>
    Lorem ipsum dolor sit amet, 
  </div>
</div>


<div class="box">
  <div>
    Lorem ipsum dolor sit amet,
  </div>
  <div style="width:100%;">
    Lorem ipsum dolor sit amet,
  </div>
</div>

要理解这两种情况，您需要了解 Flexbox 算法，我将总结为 3 点：

1. 我们首先设置每个元素的初始宽度
2. 如果总宽度大于容器宽度，我们会缩小两个元素
3. 收缩因子考虑负自由空间（总宽度 - 容器宽度）和每个元素的宽度。

诀窍在于（1）。

如果没有，width:100%我们将在（1）中得到以下内容

$('.box div').each(function() {
  console.log($(this).width());
})

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
  flex-shrink:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>

两个元素具有相同的宽度，因此两者都会以相同的方式收缩以获得以下结果：

$('.box div').each(function() {
  console.log($(this).width());
})

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
  flex-shrink:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>

现在，如果您制作第二个元素，width:100%它将具有较小的初始宽度

$('.box div').each(function() {
  console.log($(this).width());
})

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
  flex-shrink:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div style="width:100%">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>

第一个几乎比第二个大 3 倍，因此它们不会以相同的方式收缩，最后第二个将保持较小（它将保持几乎 3 倍小）

$('.box div').each(function() {
  console.log($(this).width());
})

.box {
  display: flex;
  width: 50%;
  border: 2px solid red;
  margin: auto;
}

.box>div {
  border: 1px solid green;
  flex-shrink:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
  <div style="width:100%">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
  </div>
</div>

同样的逻辑适用于您的代码！

当使用较小的内容时，同样的逻辑也适用，但在这种情况下，width:100%可以使第二个项目的初始宽度更大，因此我们最终拥有更大的元素（如上面的第二个片段所示）

您将在一些相关问题中获得有关计算和 Flexbox 算法的更多详细信息：

如果没有设置flex-basis或width，flexbox如何计算flex-item的宽度？

为什么弹性项目受限于父级尺寸？

CSS不可预知的包裹习惯

如果您想增加元素的宽度，您可以使第一个元素缩小更多：

body {
  font-size: 1.3rem;
}

h1 {
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  display: flex;
}

.primary-content {
  background-color: moccasin;
}

.sidebar {
  padding: 1em;
  text-align: center;
  color: #fff;
  background-color: #136c72;
}

<main class="main container row">
  <section class="primary-content">
    <h2>Quality designs made custom, on demand, just for you</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </section>
  <aside class="sidebar">
    <h2>Cheap</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </aside>
</main>

<main class="main container row">
  <section class="primary-content" style="flex-shrink:1.2;">
    <h2>Quality designs made custom, on demand, just for you</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </section>
  <aside class="sidebar">
    <h2>Cheap</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </aside>
</main>

您还可以同时定义flex-shrink两者并确保第一个元素更大：