为 Flex 项目创建 CSS 填充实用程序？

Question

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

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

这将应用于我们希望他们填满剩余 space 的地方。

只是想看看我的解释是否正确。基础是 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

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

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

应用于所有元素时

在这种情况下，这个 class 将允许我们平均分配 所有 space 而无需考虑不同元素的内容。它不仅会分发免费space.

这是一个基本示例：

.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>

我们不再有相同的元素，宽度将根据内容而变化，因为我们正在分发免费的 space！

这里是来自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.

当应用于一个元素时

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

这是一个例子：

.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% 剩余的 space 而不会影响布局。

现在删除 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>

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

为 Flex 项目创建 CSS 填充实用程序？

Creating a CSS Fill Utility for Flex Items?

html

css

component-design

flexbox

应用于所有元素时

当应用于一个元素时