行高或垂直對齊Flexbox的孩子

Question

最小工作示例：http://jsfiddle.net/3qxfknd7/

你可以看到A和B均爲其各自的div中水平居中，而不是垂直方向。高度是動態的，因此我不能將line-height設置爲font-size，因爲具有較大font-size的按鈕將不得不確定line-height。接下來，類large可能會或可能不存在：我不能認爲它存在！

我該怎麼做？

<div class="button-group"> 
    <div class="button"><span>A</span></div> 
    <div class="button"><span class="large">B</span></div> 
</div> 

.button-group { 
    display: flex; 
    flex-flow: row nowrap; 
    align-content: flex-start; 
    justify-content: flex-start; 
} 

.button { 
    flex: 1 0 auto; 
    text-align: center; 
    outline: 1px solid red; 
} 

.button span { 
    font-size: 20px; 
} 

.button span.large { 
    font-size: 40px; 
} 

Answer 1

不知道這是否是你所追求的：

.button-group { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 

 
.button { 
 
    display:flex; 
 
    align-items: center; 
 
    flex: 1 0 auto; 
 
    align-content: center;  
 
    justify-content: center; 
 
    outline: 1px solid red; 
 
} 
 

 
.button span { 
 
    font-size: 20px; 
 
} 
 

 
.button span.large { 
 
    font-size: 40px; 
 
}

<div class="button-group"> 
 
    <div class="button"><span>A</span></div> 
 
    <div class="button"><span class="large">B</span></div> 
 
</div>