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

Ole 发表于 Dev

是

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

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

这将用于灵活地显示我们希望他们填充剩余空间的位置。

只想看看我是否在解释这一权利。基数为0％，因此默认情况下项目的宽度可以为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>

陪同Afif

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-1

我来说两句

0 条评论

登录后参与评论

上一篇：如何从XMonad中的所有浮动窗口中删除边框