垂直对齐内联柔性元素

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/