垂直對齊內聯柔性元素

Question

我正在試圖垂直對齊3個不同的內聯柔性元素在同一個div中，但最後一個不符合預期。

Here is a JSFiddle

HTML

<div class="container"> 
    <div class="left"> 
     <span>2014/01/21</span> 
    </div><div class="middle"> 
     <button>Hello</button> 
     <button>Bye</button> 
    </div><div class="right"> 
     <ul> 
     <li>Chocolate</li> 
     <li>Caramel</li> 
     <li>Watermelon</li> 
     </ul> 
    </div> 
</div> 

CSS

.container { 
    height: 100px; 
    width: 100%; 
    background-color: blue; 
} 

.container .left, .container .right { 
    height: 100%; 
    width: 30%; 
} 

.container .middle { 
    height: 100%; 
    width: 40%; 
} 

.container .left, .container .middle { 
    display: -webkit-inline-flex; 
    -webkit-justify-content: center; 
    -webkit-align-items: center; 
    display: -moz-inline-flex; 
    -moz-justify-content: center; 
    -moz-align-items: center; 
} 

.container .right { 
    display: -webkit-inline-flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -webkit-box-pack: center; 
    -webkit-flex-pack: center; 
    -webkit-justify-content: center; 
    -webkit-flex-align: center; 
    -webkit-align-items: center; 
    display: -moz-inline-flex; 
    -moz-justify-content: center; 
    -moz-align-items: center; 
    -moz-flex-direction: column; 
} 

.container .right ul { 
    padding: 0; 
    margin: 0; 
} 

Answer 1

只需添加vertical-align:top到.container .right：

.container .right { 
    display: -webkit-inline-flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -webkit-box-pack: center; 
    -webkit-flex-pack: center; 
    -webkit-justify-content: center; 
    -webkit-flex-align: center; 
    -webkit-align-items: center; 
    vertical-align: top; 
} 

JSFiddle

Answer 2

如果您使用autoprefixer您將不再需要爲所有的規則-webkit-前綴。本指南對於瞭解如何使用Flexbox居中非常有幫助：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/