width
和flex-grow
是两个完全不同的CSS特性。
该width
属性用于定义元素的宽度。
该flex-grow
属性用于在flex容器中分配可用空间。像该属性一样,此属性未将特定长度应用于元素width
。它只是允许弹性项目消耗任何可用空间。
有时,如果我希望一个元素扩大其余空间,我可以这样做width: 100%
或flex-grow: 1
。我该如何选择?
是的,如果是行中的一个元素,width: 100%
并且flex-grow: 1
可能有同样的效果(视padding
,border
并@R_504_2419@- sizing
设置)。
但是,如果有两个元素,而您想让第二个元素占用剩余空间呢?容器中有兄弟姐妹时,width: 100%
会导致溢出。我想你可以做这样的事情:
width: calc(100% - width of sibling);
但是,如果同级的宽度是动态的或未知的怎么办?calc
不再是一种选择。
虽然width
和flex-grow
是苹果与桔子,width
和flex-basis
是苹果对苹果。
该flex-basis
属性设置弹性项目的初始主要尺寸,类似于width
。