html - 具有列反向影响同级内联柔性容器对齐的内联柔性容器

Question

在我的代码中，两个内联 flex div 并排放置。

在第一个内联 flex div 中，flex 元素被设置为 flex-direction:column-reverse。然而，这会影响它的兄弟 inline flex div 的水平位置。我的意思是，当 flex 设置为 flex-direction: column 时，同级 flex 的位置不同。我不明白为什么会这样。

我的理解是 flex-direction 只控制它的 child 的位置，即 flex 元素，它对它的兄弟 flex div 没有影响。但显然这似乎是错误的。谁能解释为什么？谢谢!

.flex {
  display: inline-flex;
  border: solid;
  margin: 10px;
}
.box {
  background: papayaWhip;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}
.column-reverse {
  flex-direction: column-reverse;
}
.column {
  flex-direction: column;
}

<div class="flex column-reverse">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class='flex'>
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class="flex column">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>

Answer 1

inline-flex 容器中 column-reverse 中的 flex 元素会简单地反转，并且 不会影响水平对齐 其他元素就行了。

然而，实际上并非如此。

在 inline-flex 容器中，column-reverse 会切换 flex 元素的方向(正如预期的那样)，但也会反转容器的流向(向上)。

来自您的代码(三个 inline-flex 容器，在父级周围添加了红色边框):

这似乎不是一个错误。行为是相同的跨浏览器(在 Chrome、FF、IE11 中测试)。

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

1. vertical-align 属性
2. column-reverse 规范规则

垂直对齐

vertical-align的初始值适用于行内级元素的属性是 baseline。

无论容器是 column 还是 column-reverse，这都是应用的值。

flex item #1 的对齐方式没有改变可能是因为(来自规范):

5.1. Flex Flow Direction: the flex-direction property

column-reverse

Same as column, except the main-start and main-end directions are swapped.

Note: The reverse values do not reverse box ordering: like writing-mode and direction, they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

如果我没看错的话，column-reverse 实际上并没有改变 flex 元素的顺序。它反转容器的流动。这可以解释第一个容器的向上膨胀。

---

解决方案#1

一种解决问题的方法，如 @NenadVracar's answer 中所述，就是调整vertical-align的值。从默认的 baseline 值切换到 top 就可以了。

.flex {
  display: inline-flex;
  border: solid;
  margin: 10px;
  vertical-align: top; /* NEW */
}
.box {
  background: papayaWhip;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}
.column-reverse {
  flex-direction: column-reverse;
}
.column {
  flex-direction: column;
}

<div class="flex column-reverse">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class='flex'>
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class="flex column">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>

---

解决方案#2

使 inline-flex 的父级成为 flex 容器也解决了这个问题:

body {
    display: flex;            /* NEW */
    align-items: flex-start;  /* NEW; optional; to disable equal height columns */
}

.flex {
  display: inline-flex;
  border: solid;
  margin: 10px;
}
.box {
  background: papayaWhip;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}
.column-reverse {
  flex-direction: column-reverse;
}
.column {
  flex-direction: column;
}

<div class="flex column-reverse">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class='flex'>
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>
<div class="flex column">
  <div class="box">item1</div>
  <div class="box">item2</div>
</div>