Question

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

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-basis: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%，这是像div这样的块元素的默认行为，因此对我们来说很直观。然后half类将覆盖它。如果删除flex:0 0 100%，您将不会看到任何内容，因为元素为空。

结合flex速记和百分比宽度？

1 个答案: