flex-boxで高さを合わせる

css関連
2020年3月17日

flexboxで横並びのボックスの高さを合わせる方法。

.flow-box {
    margin: 0 auto 10px;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #666;
    font-size: 16px;
}
.flow-box-left {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #313131;
    color: #FFF;
    padding: 30px;
}
.flow-box-right {
    width: 65%;
    background-color: #FFF;
    padding: 30px;
}

まず高さを合わせるだけなら
flex-wrap: wrap;
で良いのだが、例のように左ボックス内の文字を上下左右ともに中央に揃える場合は子要素の方に
display: flex;
justify-content: center;
align-items: center;
を充てる。
※ちなみにvertical-align: middle;は高さが決まっているtable要素でしか効かないので注意！

PAGE TOP