html - 使用 flexbox 列时，如何使最大宽度居中的 div 不被折叠？

Question

我有 3 个 div 垂直堆叠在容器中。我希望中间的 div 居中，但继续尽可能地水平扩展，但小于最大宽度。就像普通的 div 在没有 flexbox 的情况下使用 max-width 一样。

https://codepen.io/anon/pen/XaQXOW

CSS

.cont {
  display: flex;
  flex-direction: column;
}

.b {
  max-width: 500px;
  background-color: cyan;
}
.a, .b, .c {
  border: 1px solid #000;
  height: 100px;
}

html

<div class="cont">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

Answer 1

设置 align-self: center; 使你的 div 居中并添加 width: 100%:

.cont {
  display: flex;
  flex-direction: column;
}

.b {
  max-width: 500px;
  background-color: cyan;
  align-self: center;
  width: 100%;
  box-sizing: border-box;
}

.a, .b, .c {
  border: 1px solid #000;
  height: 100px;
}

<div class="cont">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>