【CSS】flexboxの高さを揃える方法【これで一発です】

flexboxの高さが揃わない？

ul {
display: flex;
justify-content: space-between;
align-items: center;
}
li {
padding: 5px 10px;
width: 30%;
}

ul {

display: flex;

justify-content: space-between;

align-items: center;

}

li {

padding: 5px 10px;

width: 30%;

}

ボックスの幅を統一するためにwidthを指定した場合、テキストの量によって高さに違いが出ますよね。

このボックス内のテキストの上下を真ん中にするために、親要素であるulにalign-items: center;を指定したら・・・
flexboxの全体的な高さがバラバラになってしまいます。

親要素にalign-items: centerをつけたことで、子要素であるliタグたちがX軸に沿って上下真ん中に配置されます。
なので、align-items: centerを取ると・・・

高さが揃いました。
しかし、テキストを上下真ん中にしたい場合はどうしましょう。

子要素にflex＆align-items: centerをつけてテキストを上下真ん中にします。

ul {
display: flex;
justify-content: space-between;
align-items: center;
}
li {
padding: 5px 10px;
width: 30%;
display: flex;
align-items: center;
}

ul {

display: flex;

justify-content: space-between;

align-items: center;

}

li {

padding: 5px 10px;

width: 30%;

display: flex;

align-items: center;

}

これで、ボックスの高さが揃ったflexboxができました。