如何在使用Flexbox列時從collapsing保持居中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

您可能需要使用利潤率左和利潤率右並將它們自動

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