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

flexboxの高さが揃わない？

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

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

flexboxの中身の高さを揃えたい場合はalign-items: centerは×

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

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

子要素にもflex

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

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