行高或垂直对齐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>