Flexbox - 内容垂直居中的分隔线

Question

所以我有一个容器，我想把东西从左到右均匀地隔开，并垂直居中。如果内容变长，我还想在内容之间添加垂直分隔线。

如果内容不是垂直居中，这个分隔符就可以正常工作：

section {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0 -8px;
}

section > * {
  margin: 0 8px;
}

.divider {
  width: 2px;
  margin: 6px 0;
  background: blue;
}

.item {
  flex: 1;
  background: orange;
}

<section>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Potato</p>
  </div>    
  <div class="divider"></div>
  <div class="item">
    <p>Markup</p>
  </div>
</section>

但是当我添加时align-items: center;，分隔符消失了。

section {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0 -8px;
  align-items: center;
}

section > * {
  margin: 0 8px;
}

.divider {
  width: 2px;
  margin: 6px 0;
  background: blue;
}

.item {
  flex: 1;
  background: orange;
}

<section>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Potato</p>
  </div>    
  <div class="divider"></div>
  <div class="item">
    <p>Markup</p>
  </div>
</section>

如何取回分隔符并使我的内容垂直居中？

Answer 1

设置时align-items: center，弹性项目的高度由其内容决定，因此您可以align-self: stretch在divider元素上使用。

您还可以align-self: center在item元素上使用并align-items: center从 flex-container 中删除。演示

您可以对边距DEMO执行相同操作

section {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0 -8px;
  align-items: center;
}
section>* {
  margin: 0 8px;
}
.divider {
  width: 2px;
  margin: 6px 0;
  background: blue;
  align-self: stretch;
}
.item {
  flex: 1;
  background: orange;
}

<section>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Potato</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Markup</p>
  </div>
</section>