CSS flex属性

两者的区别是什么

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

及

---

两个网格单元的反应是否相同？

flex:0 100%将弹性基准设置为100%

这意味着：使柔性项目占据柔性容器的100%宽度（假设默认柔性方向-行）

弹性：1；将flex grow属性设置为1。（默认值为0）

发件人：

flex grow CSS属性指定flex的flex增长因子
项目。它指定flex容器中的空间大小
这个项目应该讨论

更具体地说：当它是唯一一个flex-grow设置为值1的flex-item时，它意味着填充容器的剩余宽度

两个网格单元的反应方式相同吗

只有当只有一个弹性项时才会出现这种情况，其中“所有宽度”=“所有剩余宽度”

这里有一个小演示，展示了它们的不同之处：


.wpr1、.wpr2{
显示器：flex；
}
.wpr1.网格单元{
弹性：1；
}
.wpr2.网格单元{
弹性：0.100%；
}
当只有一个弹性项目时，结果是相同的
一

一
当存在多个弹性项目时，结果不同
一
二

一
二
你在用什么浏览器？@JeroenKnockaert说得很好。flex 0 100%将在所有浏览器中保持一致。Chrome中的flex 1转换为flex 1 0%。每个浏览器处理速记的方式都不同
.Grid-cell {
  flex: 1;
}