flex: none
和忽略flex属性之间有什么区别?我在几个简单的布局中测试了一下,没有看到差别。例如,我可以从蓝色的项目中删除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;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
none
之间的区别。这里是更新后的 fiddle:https://jsfiddle.net/r4s8z835/5/ - john c. j.min-width: auto
; 您需要使用overflow
属性或者min-width: 0
来覆盖这个默认值。 https://jsfiddle.net/r4s8z835/6/ - Michael Benjamin