align-items：センターがカスタムCSSで動作していませんか？

Question

何らかの理由でalign-itemsが私のカスタムCSSで動作しません。どのように私はこれを回避することができますアドバイス？問題の

画像：

これはコードです：

.list-view { 
    display:flex; 
} 
.item-image { 
    display:flex; 
    align-items:center; 
} 

私は2番目の部分は問題であることを推測しています。 align-itemsはWordPressのカスタムCSSでは白で表示されますが、displayのような他のプロパティは紺色ですので、このプロパティを読み取ることができないと推測していますが、その理由はわかりません。

Answer 1

作業中jsFiddle、アイテム画像クラスにflex: 1;を追加しました。

.list-view { 
 
    border: 1px solid black; 
 
    display: -webkit-flex; 
 
    /* Safari */ 
 
    -webkit-align-items: center; 
 
    /* Safari 7.0+ */ 
 
    display: flex; 
 
    text-align: center; 
 
} 
 

 
.item-image { 
 
    align-items: center; 
 
    flex: 1; 
 
    -webkit-flex: 1; 
 
    /* Safari 6.1+ */ 
 
}

<div class="list-view"> 
 
    <div class="item-image" style="background-color:coral;">RED</div> 
 
    <div class="item-image" style="background-color:lightblue;">BLUE</div> 
 
    <div class="item-image" style="background-color:lightgreen;">Green div with more content.</div> 
 
</div>

お役に立てば幸いです。 :)