flex-grow和width有什么区别？

我最近开始使用flexbox,经常出现需要在元素之间的主轴上分配空间的情况.

我常常width和之间犹豫不决flex-grow.例如,如果我想要一个项目来衡量2个度量,而另一个度量,最多加上100%,我有两个选择.我可以设置width: 66.6%和width: 33.3%,或者flex-grow: 2和flex-grow: 1.

有时如果我想要一个元素来扩展其余的空间,我可以做width: 100%或者flex-grow: 1.

我该如何选择？使用宽度与弹性增长有什么区别/考虑因素？

width并且flex-grow是两个完全不同的CSS属性.

该width属性用于定义元素的宽度.

该flex-grow属性用于在Flex容器中分配可用空间.此属性不会对元素应用特定长度,例如width属性.它只是允许弹性项目消耗可用的任何空间.

有时如果我想要一个元素来扩展其余的空间,我可以做width: 100%或者flex-grow: 1.我该如何选择？

是的,如果是行中的一个元素,width: 100%并且flex-grow: 1可能有同样的效果(视padding,border并box-sizing设置).

但是,如果有两个元素,并且您希望第二个元素占用剩余空间呢？容器中有兄弟姐妹width: 100%会导致溢出.我想你可以这样做:

width: calc(100% - width of sibling);

但是如果兄弟的宽度是动态的还是未知的呢？calc不再是一种选择.

快速简便的解决方案是flex-grow: 1.

虽然width并且flex-grow是苹果到橙子,width并且flex-basis是苹果对苹果.

该flex-basis属性设置弹性项的初始主要大小,类似于width.

flex-basis和width之间有什么区别？

对于之间的差异flex-basis,并flex-grow请参阅:

flex-grow不按预期调整flex项目的大小