CSS flex 属性

Question

有什么区别

.Grid-cell {
  flex: 0 0 100%;
}

和

.Grid-cell {
  flex: 1;
}

.Grid-cell 是否会有相同的 react ？

Answer 1

flex: 0 0 100%; 将 flex-basis 设置为 100% 。

意思是:让 flex 元素占据所有宽度即 flex 容器的100%宽度(假设默认 flex 方向-行)

flex :1；将 flex-grow 属性设置为 1。(默认值为 0)

来自 MDN :

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.

更具体地说:当它是唯一一个将 flex-grow 设置为 1 的 flex 元素时 - 这意味着填充容器的剩余宽度

Both Grid-cell will react the same way ?

只有在只有一个 flex 元素时才会出现这种情况 - 其中“所有宽度”=“所有剩余宽度”

这里有一个小演示，表明它们是不同的:

.wpr1, .wpr2 {
  display: flex;
}
.wpr1 .Grid-cell {
  flex: 1;
}
.wpr2 .Grid-cell {
  flex: 0 0 100%;
}

<h4>When there is only one flex item result is the same</h4>
<div class="wpr1">
  <div class="Grid-cell">one</div>

</div>
<hr>
<div class="wpr2">
  <div class="Grid-cell">one</div>
</div>
<h4>When there is more than one flex item result is different</h4>
<div class="wpr1">
  <div class="Grid-cell">one</div>
  <div class="Grid-cell">two</div>
</div>
<hr>
<div class="wpr2">
  <div class="Grid-cell">one</div>
  <div class="Grid-cell">two</div>
</div>