Question

我正在尝试使用flexbox垂直对齐三个div块。

我可以让它们水平对齐，但不能垂直对齐。

我做错了什么？

.banner {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #01b9d5;
  color: white;
  height: 55px;
}
.banner-align {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid green;
}
.banner-hero {
  flex: 1;
  align-self: center;
  max-width: 50%;
  border: 1px solid red;
  text-align: center;
  display: inline-block;
}
.banner-left {
  align-self: flex-start;
  flex: 1;
  border: 1px solid green;
  display: inline-block;
}
.banner-right {
  align-self: flex-end;
  flex: 1;
  text-align: right;
  border: 1px solid yellow;
  display: inline-block;
}

<div class="banner">
  <div class="container banner-align">
    <div class="banner-left">
      Left Block
    </div>
    <div class="banner-hero">
      <b>Title</b>
    </div>
    <div class="banner-right">
      Right block
    </div>
  </div>
</div>

这是一个小提琴：https://jsfiddle.net/zqc1qfk1/1/

Answer 1

您缺少flex的flex-direction:column属性。

默认情况下，任何弹性容器都有flex-direction: row＆amp;这就是它水平移动的原因。不垂直。您需要明确指定。

Here is more about it

.banner-align {
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid green;
  flex-direction: column;
}

更新了Fiddle。

Answer 2

只需在容器上启用wrap，然后为每个弹性项目width: 100%：

.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }

现在每个flex项消耗行中的所有空间，强制其他元素创建新行。

revised fiddle

Answer 3

您的flex父级上的

align-items: center将所有内容垂直居中。但是，在子项上使用align-self: [anything but center]会覆盖此项。

编辑：

哎呀，正如其他人指出的那样，你没有在原来的小提琴中获得align-self效果，因为父母的身高并没有设定，所以它只有高因为它需要包含孩子。如果孩子们都没有相同的高度，你会看到他们错开。

如果您尝试将它们全部置于中心位置，则可以删除align-self属性，让父级align-items: center执行此操作。如果你想让它们交错，你就不需要父母那个align-items: center。

使用flexbox垂直对齐div

3 个答案: