使用flexbox列时，如何保持max-width居中的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>

Answer 2

您可能想要使用 margin-left 和 margin-right 并将它们设置为自动

JSFIDDLE

超文本标记语言

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

CSS

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

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