时间戳

首页 > 解决方案 > 为弹性项目创建 CSS 填充实用程序？

html - 为弹性项目创建 CSS 填充实用程序？

问题描述

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

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

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

只是想看看我的解释是否正确。基数是 0%，所以 item 默认可以有 0 宽度？弹性增长和弹性收缩都是 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>

标签： htmlcssflexboxcomponent-design

解决方案

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

首先我们应该注意到这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>

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

以下是规范中的一个插图，可以让您更好地理解：

在此处输入图像描述

显示“绝对”弹性（从零开始）和“相对”弹性（从项目内容大小开始）之间差异的图表。这三个项目的弹性系数分别为 1、1 和 2：请注意弹性系数为 2 的项目的增长速度是其他项目的两倍。


当应用于一个元素时

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

这是一个例子：

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

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

推荐阅读