当前位置：首页 > news >正文

CSS flex布局 flex-grow不为1 items始终均匀分配剩余空间问题

news 来源：原创 2024/5/17 16:55:06

问题记录：

html如下：

<div class="flex-container">
  <div class="box B">B</div>
  <div class="box D">D</div>
  <div class="box E">E</div>
</div>

css如下：

对父容器 flex-container 设置 display:flex
使用 .flex-container > div 选择器选择 .flex-container 下的第一层div子元素，设置flex-grow:1
使用 .B 类选择器选择元素B，设置flex-grow:3

.flex-container{
  display:flex;
  height:200px;
  width:500px;
  justify-content:center;
  align-items:center;
  background-color:yellow;
}

.flex-container > div{
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 2em;
  /* 这里为每一个flex item设置 flex-grow:1 */
  flex-grow:1;
}

.B {
  background-color: #50a18e; 
  /* 这里单独为B设置 flex-grow:3 */
  flex-grow:3;
}
.D { background-color: #f2916d; }
.E { background-color: #f26e50; }

每个 flex item 均匀分配剩余空间
每个flex item 均匀分配剩余空间，.B的flex-grow:3 不生效。

原因分析：

一开始考虑是因为 CSS 的选择器之间有优先级。

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

但是 .flex-container > div 不算一个标签选择器，因而在菜鸟教程找到了如下规则。

当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：

CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按
a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

因此，.flex-container > div 选择器的（a）id选择器个数=0，（b）类选择器、属性选择器、伪类选择器个数之和 = 1 （c）标签选择器和伪元素选择器个数之和 = 1。
.B类选择器的（a）id选择器个数=0，（b）类选择器、属性选择器、伪类选择器个数之和 = 1 （c）标签选择器和伪元素选择器个数之和 = 0。

因而 .flex-container > div 选择器的优先级高于 .B 类选择器。
所以最后 flex items 的 flex-grow 都为1，因而出现了上图所示的平均分配父容器剩余空间。

解决方案：

不使用 .container > div 选择器，而另外使用一个类来设置flex items 的通用属性。
<div class="box B">B</div>
使用 .container > div 选择器，而在.B的样式中，设置
flex-grow:3 !important;
经评论区提醒，可以使用 .container > .B {} 选择器。
同时还要注意父容器 flex-container 的宽度，如果没有剩余空间，那么将不会出现剩余空间分配给 flex items，如果剩余空间较小，效果也将不明显。