Сочетание сокращенного сокращения с процентной шириной?

Question

Утилиты размера SUITCSS объединяют сокращение 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>

Более подробную информацию можно получить здесь: Почему flex-child ограничен родительским размером? .

InЕсли вы включите обтекание, мы можем сказать, что бесполезно добавлять 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%, что является поведением по умолчанию для блочного элемента, например * 1049.* таким образом, интуитивно для нас.Тогда класс half переопределит это.Если вы удалите flex:0 0 100%, вы просто ничего не увидите, потому что элементы пусты.