【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ができました。

コメント

タイトルとURLをコピーしました