我最近开始使用flexBox,经常出现需要在元素之间的主轴上分配空间的情况.
我经常在宽度和柔韧增长之间犹豫不决.例如,如果我想要一个项目来衡量2个度量值,而另一个度量值,加上最多100％,我有两个选择.我可以设置宽度：66.6％和宽度：33.3％,或flex-grow：2和flex-grow：1.
有时如果我想要一个元素来扩展剩余的空间,我可以做宽度：100％或flex-grow：1.
我该如何选择？使用宽度与弹性增长有什么区别/考虑因素？
解决方法
width和flex-grow是两个完全不同的CSS属性.
width属性用于定义元素的宽度.
flex-grow属性用于在Flex容器中分配可用空间.此属性不对元素应用特定长度,如width属性.它只是允许弹性项目消耗可用的任何空间.
Sometimes if I want one element to grow the rest of the space,I can either do
width: 100%orflex-grow: 1. How do I choose?
是的,如果行中有一个元素,宽度：100％和flex-grow：1可能具有相同的效果(取决于填充,边框和框大小设置).
但是,如果有两个元素,并且您希望第二个元素占用剩余空间呢？容器中有兄弟,宽度：100％会导致溢出.我想你可以这样做：
width: calc(100% - width of sibling);
但是如果兄弟的宽度是动态的还是未知的呢？ calc不再是一种选择.
宽度和柔性增长是苹果到橙子,宽度和柔性基础是苹果对苹果.
flex-basis属性设置flex项的初始主要大小,类似于width.
> What are the differences between flex-basis and width?
有关flex-basis和flex-grow之间的差异,请参阅：
