Flexbox四行布局中仅让两行并排：.wrapper > div不生效问题咨询

你的问题核心是CSS选择器的优先级计算，具体逻辑如下：

1. 当使用.wrapper > div时，这个选择器的特异性（优先级）计算为：类选择器(.wrapper)的权重10 + 元素选择器(div)的权重1，总权重是11。
2. 而.itemtwo、.itemthree这类单独的类选择器，权重仅为10。

因为.wrapper > div的优先级更高，它定义的flex: 1 1 100%会直接覆盖你给.itemtwo和.itemthree设置的flex: 1 1 auto——这就导致这两个元素依然占满整行，无法并排显示。

当改成.wrapper > *时，通配符*的权重为0，加上.wrapper的10，总权重是10，和.itemtwo的优先级持平。此时CSS会遵循「同优先级规则，后面的声明覆盖前面的」，所以.itemtwo和.itemthree的flex属性就能生效，实现并排效果。

验证方式 #

你可以给.itemtwo的flex属性加上!important做测试：

.itemtwo,
.itemthree {
  flex: 1 1 auto !important;  
  color: red;
}

此时即便用.wrapper > div，也能实现并排，但不推荐依赖!important，建议用更合理的优先级匹配方案。

解决方案 #

推荐以下几种方式：

• 方式一：提升目标元素选择器的优先级，比如写成.wrapper .itemtwo，这样权重为10+10=20，高于.wrapper > div的11，能顺利覆盖规则：

.wrapper .itemtwo,
.wrapper .itemthree {
  flex: 1 1 auto;  
  color: red;
}

• 方式二：保留.wrapper > *的写法，利用它和单独类选择器持平的优先级，让后面的声明覆盖前面的基础规则。

内容的提问来源于stack exchange，提问作者M Codet