嵌套的子元素多层flex：1以后不生效

作者：System 时间：2024年08月15日分类：所有,css3 字数：505

当你在CSS中使用flexbox布局时，如果你在父元素上设置了flex: 1，而子元素也设置了flex: 1，你可能会期望子元素会占据父元素的1/4（如果有4个兄弟元素）。但如果子元素自身又包含了其他元素，并且这些元素也设置了flex: 1，那么这些元素可能不会按照你的预期工作。

这是因为flex: 1只在直接子元素之间分配可用空间。如果子元素包含了嵌套的子元素，并且这些嵌套的子元素也设置了flex: 1，则它们只会相对于它们的同级元素进行伸缩，而不会跨越多层嵌套。

解决方法：

例如，使用flex-grow属性而不是flex shorthand：




.grandchild {
  flex-grow: 1;
}

这样可以确保所有的子孙元素（grandchild）都会在父元素中均等分配可用空间。