您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

flex-grow和width有什么区别?

flex-grow和width有什么区别?

widthflex-grow是两个完全不同的CSS特性。

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

flex-grow属性用于在flex容器中分配可用空间。像该属性一样,此属性未将特定长度应用于元素width。它只是允许弹性项目消耗任何可用空间。

有时,如果我希望一个元素扩大其余空间,我可以这样做width: 100%flex-grow: 1。我该如何选择?

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

但是,如果有两个元素,而您想让第二个元素占用剩余空间呢?容器中有兄弟姐妹时,width: 100%会导致溢出。我想你可以做这样的事情:

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

但是,如果同级的宽度是动态的或未知的怎么办?calc不再是一种选择。

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

虽然widthflex-grow是苹果与桔子,widthflex-basis是苹果对苹果。

flex-basis属性设置弹性项目的初始主要尺寸,类似于width

其他 2022/1/1 18:14:04 有439人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶