Bir esnek kutu öğesinin içeriğini dikey olarak ortalamak için nasıl

Question

justify-content:stretch; kullanırken bir esnek kutu öğesinin İÇİNDEKİLERİNİ ortalamaya çalışıyorum Bu durumun display:table-cell;vertical-align:middle; eski numarasının bu durumda çalışmadığı görülüyor. Nedir? Cevap vermeden önce

.flex-container { 
    display:flex; 
    align-items:center; 
    justify-content:stretch; 
} 
.flex-item { 
    align-self:stretch; 
} 

<div class="flex-container"> 
    <div class="flex-item">I want to be vertically centered! But I'm not.</div> 
</div> 

: ben soruyorum hakkında çok şey karışıklık var gibi gözüküyor. Esnek öğenin İÇİNDEKİLER merkezini oluşturmaya çalışıyorum. justify-content:stretch ile, öğenin yüksekliği kapsayıcının tam yüksekliğine kadar uzar, ancak öğesinin içeriği öğesinin en üstte (en azından Chrome) yüzer.

"Bir resim bin kelimeye bedeldir." (A) zaten sahip olduğum şey. (B) istediğim şey.

Answer 1

, aşağıdaki gibi, bir flex kap olarak her bir esnek öğe ing ve align-items özelliği dikey içeriği hizalama display ile elde edilebilir:

.flex-container { 
 
    display:flex; 
 
    align-items:center; 
 
    height: 200px; /* for demo */ 
 
} 
 

 
.flex-item { 
 
    align-self:stretch; 
 
    display:flex; 
 
    align-items:center; 
 
    background-color: gold; /* for demo */ 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
     I want to be vertically centered! 
 
     <s>But I'm not.</s> 
 
    </div> 
 
</div>

bir yan olarak, Not .flex-container'un align-items:center; bildirimini atlarsanız, align-self:stretch; güvenli ürünlerden de güvenle çıkarabilirsiniz.

Answer 2

İsteğinizi doğru bir şekilde yorumluyor muyum, ancak "haklı içerik: streç;" flex-grow kullanmanız gerektiğinde.

Örneklerim flex kullanıyorum: 1 otomatik; Bir çift esnek özellik belirlemek için sadece shorthand.

HTML:

<div class="flex-container"> 
    <div class="flex-item">I'm top dog! 
    </div> 
    <div class="flex-item flex-center"> 
     I want to be vertically centered! And I am! 
    </div> 
</div> 

CSS:

*{ 
    box-sizing:border-box; 
    padding:5px; 
} 
.flex-container { 
    border: 1px solid; 
    display:flex; 
    align-items:center; 
    height: 100px; 
} 
.flex-item { 
    flex: 1 auto; 
    border: 1px solid green; 
    height:100%; 
    display:flex; 
    justify-content:center; 
} 
.flex-center { 
    align-items: center; 
} 

http://jsfiddle.net/p28tjskq/

Flex özelliği:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex