html - 为 Flex 元素创建 CSS 填充实用程序？

Question

我正在审查 SUITCSS 的填充实用程序设计:

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}

这将应用于我们希望它们填满剩余空间的地方。

只是想看看我的解释是否正确。基础是 0%，所以元素可以默认为 0 宽度？ flex grow 和 flex shrink 都是 1，所以它会以相同的速率增长和收缩。这种解释正确吗？

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}

<div style="display: flex; background-color: yellow; width: 5rem; height: 3rem">
      <div style="min-width: 0" class="u-sizeFill">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
</div>

Answer 1

为了理解这个类的用例，我可以看到两种不同的情况。此类要么应用于所有元素，要么仅应用于一个元素。

首先我们应该注意到 flex-shrink:1 是默认值，所以我们只设置 flex-grow:1 和 flex-basis:0 %

应用于所有元素时

在这种情况下，此类将允许我们平均分配所有空间，而无需考虑不同元素的内容。它不仅会分配可用空间。

这是一个基本的例子:

.box {
  display:flex;
  border:1px solid;
  margin:5px;
}
.box > span {
  flex:1 1 0%;
  background:yellow;
  outline:1px solid #000;
}

<div class="box">
  <span>text</span>
  <span>more text</span>
  <span>another long text here</span>
</div>

<div class="box">
  <span>A</span>
  <span>more text here</span>
  <span>another loooong text here</span>
</div>

请注意在下面的代码中我们的 3 个元素如何具有相同的大小，即使内容会发生变化。我们创建了一个 3 列布局。

现在，让我们删除 flex-basis:0% 并只保留 flex-grow:1

.box {
  display:flex;
  border:1px solid;
  margin:5px;
}
.box > span {
  flex-grow:1;
  background:yellow;
  outline:1px solid #000;
}

<div class="box">
  <span>text</span>
  <span>more text</span>
  <span>another long text here</span>
</div>

<div class="box">
  <span>A</span>
  <span>more text here</span>
  <span>another loooong text here</span>
</div>

我们不再有相等的元素，宽度将根据内容而改变，因为我们正在分配可用空间!

这里来自the specification一个能让你更好理解的插图:

A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item’s content size). The three items have flex factors of 1, 1, and 2, respectively: notice that the item with a flex factor of 2 grows twice as fast as the others.

应用于一个元素时

在这种情况下，我们将确保该元素在添加到布局时不会影响其他元素，因为它只会占用剩余空间(如果有的话)。换句话说，它的内容不会在空间分配中得到考虑。

这是一个例子:

.box {
 margin:5px;
 border:1px solid;
 display:flex;
}
.box > span:not(.extra) {
  width:40%;
  background:yellow;
  outline:1px solid;
  min-height:30px;
}
.extra {
  flex:1 1 0%;
  background:green;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="extra">I am extra</span>
</div>
<div class="box">
  <span></span>
  <span></span>
  <span class="extra">I am extra element with long text</span>
</div>
<div class="box">
  <span></span>
  <span></span>
  <span class="extra">..</span>
</div>
<div class="box">
  <span></span>
  <span></span>
</div>

如您所见，在所有情况下，额外的元素只会占用 20% 的剩余空间，而不会影响布局。

现在删除 flex-basis，您将看到不同的行为:

.box {
 margin:5px;
 border:1px solid;
 display:flex;
}
.box > span:not(.extra) {
  width:40%;
  background:yellow;
  outline:1px solid;
  min-height:30px;
}
.extra {
  flex-grow:1;
  background:green;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="extra">I am extra</span>
</div>
<div class="box">
  <span></span>
  <span></span>
  <span class="extra">I am extra element with long text</span>
</div>
<div class="box">
  <span></span>
  <span></span>
  <span class="extra">..</span>
</div>
<div class="box">
  <span></span>
  <span></span>
</div>

正如您在第二种情况下看到的，我们的元素将收缩并破坏初始布局，这可能不是预期的结果。