CSS flex布局 flex

admin管理员组

文章数量:1794759

CSS flex布局 flex

问题记录：

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 均匀分配剩余空间，.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，如果剩余空间较小，效果也将不明显。

本文标签： 布局cssFlex