为什么框布局需要CSS3中的width属性？

Question

这是我的代码......

.box {
   display:-webkit-box;
 }
.item {
     -webkit-box-flex: 1;
     width:1%; //this value can be set to any value 
}

width属性是什么意思？

Answer 1

Flexbox的目的是动态的，您根本不需要设置宽度，这是flex属性的功能（它根据周围的项目调整每个项目的大小）。有一篇很好的文章解释了Flexbox here的所有特性和功能。如果您可以提供您尝试做的具体示例，那么我可以提供更具体的答案。

Answer 2

要回答标题中的问题，您在使用flex时不需要为项目设置宽度。 MDN上有很多例子。 https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-flex

通过设置宽度，您可以控制.item在父元素中占用的最小空间量。但请记住，无论你设置什么宽度，项目的宽度都不会超过父项的宽度除以项目数。因此，如果容器中有5个盒子，那些盒子的宽度不会超过容器宽度的1/5。

我在这里找到了一个关于使用flex的好视频：https://www.youtube.com/watch?v=G7EIAgfkhmg