flexboxの高さが揃わない?
1 2 3 4 5 6 7 8 9 |
ul { display: flex; justify-content: space-between; align-items: center; } li { padding: 5px 10px; width: 30%; } |
ボックスの幅を統一するためにwidthを指定した場合、テキストの量によって高さに違いが出ますよね。
このボックス内のテキストの上下を真ん中にするために、親要素であるulにalign-items: center;を指定したら・・・
flexboxの全体的な高さがバラバラになってしまいます。
flexboxの中身の高さを揃えたい場合はalign-items: centerは×
親要素にalign-items: centerをつけたことで、子要素であるliタグたちがX軸に沿って上下真ん中に配置されます。
なので、align-items: centerを取ると・・・
高さが揃いました。
しかし、テキストを上下真ん中にしたい場合はどうしましょう。
子要素にもflex
子要素にflex&align-items: centerをつけてテキストを上下真ん中にします。
1 2 3 4 5 6 7 8 9 10 11 |
ul { display: flex; justify-content: space-between; align-items: center; } li { padding: 5px 10px; width: 30%; display: flex; align-items: center; } |
これで、ボックスの高さが揃ったflexboxができました。
コメント