flex: noneflex属性之间是否存在差异？
我在几个简单的布局中测试它,我没有看到差异.
例如,我可以flex: none从蓝色项目中删除(参见下面的代码),据我所知,布局保持不变.我理解对吗？
而且,第二个问题,更复杂的布局呢？我应该写作flex: none还是我可以简单地省略它？
.flex-container {
display: flex;
width: 400px;
height: 150px;
background-color: lightgrey;
}
.flex-item {
margin: 10px;
}
.item1 {
flex: none; /* Could be omitted? */
background-color: cornflowerblue;
}
.item2 {
flex: 1;
background-color: orange;
}
.item3 {
flex: 1;
background-color: green;
}
flex item 1
flex item 2
flex item 3
https://jsfiddle.net/r4s8z835/
flex: noneflex属性之间是否存在差异？
flex: none相当于flex: 0 0 auto,这是:
flex-grow: 0
flex-shrink: 0
flex-basis: auto
简单地说,flex: none根据内容的宽度/高度调整弹性项目的大小,但不允许缩小.这意味着该物品有可能溢出容器.
如果省略flex属性(和手写属性),则初始值如下:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
这被称为flex: initial.
这意味着当有可用空间时(例如flex: none),项目不会增长,但必要时可以收缩(不像flex: none).
我可以
flex: none从蓝色项目中删除(见下面的代码),据我所知,布局保持不变.
在您的演示方面,flex: none删除时没有区别的原因是两个兄弟(.item2和.item3)是灵活的(flex: 1),并且容器中有足够的空间来容纳内容.item1.
但是,如果.item1有更多的内容,flex: none会产生很大的不同.
修改过的小提琴
.flex-container {
display: flex;
width: 400px;
height: 150px;
background-color: lightgrey;
}
.flex-item {
margin: 10px;
}
.item1 {
flex: none; /* Now try removing it. */
background-color: cornflowerblue;
}
.item2 {
flex: 1;
background-color: orange;
}
.item3 {
flex: 1;
background-color: green;
}
flex item 1 flex item 1 flex item 1 flex item 1flex item 1 flex item 1flex item 1flex item 1
flex item 2
flex item 3
京公网安备 11010802040832号 | 京ICP备19059560号-6 