内联 - 柔性容器，具有柱反向冲击对齐同级内联柔性容器

Question

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

在第一个内联flex div中，flex项目设置为Private Sub ListView1_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single) Dim clickedItem As MSComctlLib.ListItem Set clickedItem = ListView1.HitTest(x, y) If Not clickedItem Is Nothing Then ListView1.Visible = False End Sub 。但是，这会影响其兄弟内联flex div的水平位置。我的意思是，当flex设置为flex-direction:column-reverse时，兄弟flex的位置不同。我不明白为什么会这样。

我的理解是flex-direction: column仅控制其子项的位置，即弹性项，并且它对其兄弟的flex div没有影响。但显然这似乎是错误的。谁能解释为什么？谢谢！

flex-direction

.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;
}

Answer 1

预计column-reverse容器中inline-flex中的弹性项只会反转，而不会影响线上其他元素的水平对齐，这听起来是合理的。< / p>

然而，实际情况并非如此。

在inline-flex容器中，column-reverse切换弹性项目的方向（如预期的那样），，但也会反转容器的流量（向上）。

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

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

问题可能是两个因素的结果：

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

的 vertical-align

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

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

灵活项目＃1的对齐可能不会因为（来自规范）而改变：

  

5.1. Flex Flow Direction: the flex-direction property

     

<强> column-reverse

     

与column相同，但主开始和主要方向除外   交换。

     

注意：反向值不反转框顺序：喜欢   写作模式和方向，他们只改变流动的方向。   绘画顺序，语音顺序和顺序导航顺序不是   影响。

如果我正确读取此内容，column-reverse实际上并未更改弹性项目的顺序。它可以逆转容器的流动。这可以解释第一个容器的向上扩展。

解决方案＃1

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

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

解决方案＃2

使inline-flex div的父级成为Flex容器也可以解决问题：

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

由于默认vertical-align为基线，在您更改Flex项目的顺序或column-reverse时，它们似乎仍与item1对齐如果您将vertical-align更改为顶部，则它们会与最高位置对齐，vertical-align: middle也会在此处Fiddle

.flex {
  display: inline-flex;
  vertical-align: top;
  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>