html - 将 flex 速记与百分比宽度结合起来？

Question

SUITCSS 尺寸实用程序将 flex 速记和百分比宽度组合到 u-sizeXofY 实用程序中。

Here's is a link to the tests .

flex 属性设置如下:

flex: 0 0 100%;

它与 u-sizeXofY 实用程序相结合，如下所示:

 width: 50% !important;

我想了解的是他们为什么要这样做？

将 flex: 0 0 100% 与 width: 50% !important; 实用程序结合使用的原因是什么？

Answer 1

首先类u-sizeXofY定义如下:

-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
width: 50% !important;

因此，如果我们将其与 .u-fullWidthFlex (flex:0 0 100%) 结合使用，我们将拥有以下设置:

width:50%;
flex-basis:auto; /*default value*/
flex-shrink:0;
flex-grow:0; /*default value*/

所以基本上我们只是添加 flex-shrink:0 来禁用收缩效果，这将在多个元素溢出时产生效果。

这是一个基本的例子:

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  width:50%;
}
.shrink > span {
 flex-shrink:0;
}

<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="box shrink">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

您可以在此处获得更多详细信息:Why is a flex-child limited to parent size? .

如果您要启用换行，我们可以说添加 flex-shrink:0 是没有用的，因为我们将触发换行而不是收缩:

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
  flex-wrap:wrap;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  width:50%;
}
.shrink > span {
 flex-shrink:0;
}

<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="box shrink">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

---

使用此类将确保元素的宽度为容器宽度的一半，因此您不会对任何并非微不足道的收缩效果感到惊讶。溢出会更合乎逻辑，因为您会以某种方式理解您通过添加比需要更多的元素或忘记启用包装而犯了一个错误。

组合这些类的另一个原因可能也与媒体查询有关，例如我们可以在一些断点处定义 u-sizeXofY 因此你可能有不同的行为有和没有 flex -基础:0 0 100%

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
  flex-wrap:wrap;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  flex:0 0 100%;
}

@media all and (min-width:800px) {
  .half {
    width:50%!important;
    flex-basis:auto!important;
  }
}

<div class="box">
  <span class="half"></span>
  <span class="half"></span>
  <span class="half"></span>
  <span class="half"></span>
</div>

如您所见，flex:0 0 100% 会将我们元素的初始宽度设置为 100%，这是 block 元素的默认行为，例如 div 因此对我们来说很直观。然后 half 类将覆盖它。如果您删除 flex:0 0 100%，您将什么也看不到，因为元素是空的。