Html 列反转的内联flex容器影响同级内联flex容器的对齐

在我的代码中，两个内联flex div相邻

在第一个内联flex div中，flex项被设置为

flex direction:column reverse

。但是，这会影响其同级内联flex div的水平位置。我的意思是，当flex设置为

flex-direction:column

时，兄弟flex的位置不同。我不明白为什么会这样

我的理解是，

flex direction

只控制其子项的位置，即flex项，它对其兄弟flex div没有影响。但显然这似乎是错误的。有人能解释为什么吗？谢谢

.flex{
显示：内联flex；
边框：实心；
利润率：10px；
}
.盒子{
背景：番木瓜；
宽度：100px；
高度：100px；
利润率：10px；
填充：10px；
}
.列反转{
弯曲方向：柱反向；
}
.栏目{
弯曲方向：立柱；
}

项目1
项目2
项目1
项目2
项目1
项目2

因为默认的

垂直对齐

是基线在这种情况下，当您更改弹性项目的顺序或

列反转

时，它们仍然与

项目1

对齐，但如果将

垂直对齐

更改为顶部则与顶部对齐，

vertical align:middle

也可以在这里使用

.flex{
显示：内联flex；
垂直对齐：顶部；
边框：实心；
利润率：10px；
}
.盒子{
背景：番木瓜；
宽度：100px；
高度：100px；
利润率：10px；
填充：10px；
}
.列反转{
弯曲方向：柱反向；
}
.栏目{
弯曲方向：立柱；
}

项目1
项目2
项目1
项目2
项目1
项目2

因为默认的

垂直对齐

是基线在这种情况下，当您更改弹性项目的顺序或

列反转

时，它们仍然与

项目1

对齐，但如果将

垂直对齐

更改为顶部则与顶部对齐，

vertical align:middle

也可以在这里使用

.flex{
显示：内联flex；
垂直对齐：顶部；
边框：实心；
利润率：10px；
}
.盒子{
背景：番木瓜；
宽度：100px；
高度：100px；
利润率：10px；
填充：10px；
}
.列反转{
弯曲方向：柱反向；
}
.栏目{
弯曲方向：立柱；
}

项目1
项目2
项目1
项目2
项目1
项目2

在

内联flex

容器中，

列反向

中的flex项可以简单地反向，而不会影响行上其他元素的水平对齐，这听起来很合理

然而，事实并非如此

在

内联flex

容器中，

列反转

切换flex项的方向（如预期），但也反转容器的流向（向上）

从您的代码（三个内联flex容器，在父容器周围添加了红色边框）：

这似乎不是一个bug。该行为是相同的跨浏览器（在Chrome、FF、IE11中测试）

这个问题可能是两个因素造成的：

垂直对齐

属性

列反转

规格规则

垂直对齐

应用于内联级元素的属性的初始值为

baseline

无论容器是

列

还是

列反转

，都将应用此值

弹性项目1的对齐方式不会改变，可能是因为（从规范中）：

列反转

与

列

相同，只是主起点和主终点方向为 交换

注意：反向值不反转框顺序：类似 写作模式和方向，它们只会改变流动的方向。 不支持绘制顺序、语音顺序和顺序导航顺序 装腔作势

如果我没有看错的话，

列反转

实际上不会改变弹性项的顺序。它反转容器的流动。这可以解释第一个容器向上膨胀的原因

---

解决方案#1 解决此问题的一种方法（如中所述）是调整

垂直对齐的值。从默认的
baseline
值切换到
top
就可以了


.flex{
显示：内联flex；
边框：实心；
利润率：10px；
垂直对齐：顶部；/*新*/
}
.盒子{
背景：番木瓜；
宽度：100px；
高度：100px；
利润率：10px；
填充：10px；
}
.列反转{
弯曲方向：柱反向；
}
.栏目{
弯曲方向：立柱；
}

项目1
项目2
项目1
项目2
项目1
项目2
在
内联flex
容器中，
列反向
中的flex项可以简单地反向，而不会影响行上其他元素的水平对齐，这听起来很合理

然而，事实并非如此

在
内联flex
容器中，
列反转
切换flex项的方向（如预期），但也反转容器的流向（向上）

从您的代码（三个内联flex容器，在父容器周围添加了红色边框）：


这似乎不是一个bug。该行为是相同的跨浏览器（在Chrome、FF、IE11中测试）

这个问题可能是两个因素造成的：

垂直对齐
属性
列反转
规格规则
垂直对齐
应用于内联级元素的属性的初始值为
baseline

这是无论容器是否为