当使用flexbox列时，如何保持居中div与最大宽度的折叠？

Question

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

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并将它们设置为auto

的jsfiddle

HTML

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