Flexbox 子项中的行高或垂直对齐

Question

您可以看到 A 和 B 都在各自的 div 中水平居中，但不是垂直居中。高度是动态的，因此我无法将 line-height 设置为 font-size，因为具有更大 font-size 的按钮将必须确定 line-height。接下来，class 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>

Flexbox 子项中的行高或垂直对齐

Line height or vertical align in flexbox child

css

flexbox