Vertikale Ausrichtung von Inline-Flex-Elementen

Question

Ich versuche, drei verschiedene Inline-Flex-Elemente in einem div vertikal auszurichten, aber das letzte passt nicht wie erwartet.

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

Fügen Sie einfach 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

Wenn Sie autoprefixer verwenden Sie -webkit- Präfixe für alle Regeln nicht benötigen. Dieses Handbuch ist sehr hilfreich, wenn Sie wissen möchten, wie Sie mit Flexbox zentrieren: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/