CSS

【CSS】flexboxで子要素、孫要素の高さをそろえる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

flexコンテナの子要素の高さをそろえることはcssのflexレイアウトでデフォルトで可能すが、テキストエリアなどの孫要素の高さは対応をしなければ以下の様にバラバラになってしまいます。

.flex-card_bara
.flex-img
.flex-text
text
text
.flex-btn
.flex-card_bara
.flex-img
.flex-text
text
text
text
.flex-btn
.flex-card_bara
.flex-img
.flex-text
text
.flex-btn


height.jsなどjsを使用することで対応できますが動作が重くなりパフォーマンス低下の恐れがあります。

今回はflexコンテナの孫要素の高さをcssでそろえる方法の覚書になります。

まず flexコンテナの子要素(.flex-card)に
display: flex;
flex-direction: column;

を設定します。

display: flex;にすることで要素が横並びになってしまうので flex-direction: column; にすることで要素を縦積みにします。

.wrap-flex .flex-card {
    width: 31%;
    background: #000000;
    padding: 20px;
    font-size: 120%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

高さを合わせたい要素に
flex-grow: 1;
を設定することで2段目の余っているエリアを自動的に決定します。

.flex-card .flex-text {
    flex-grow: 1;
}

こちらが実際のデモになります。

.flex-card
.flex-img
.flex-text
text
text
.flex-btn
.flex-card
.flex-img
.flex-text
text
text
text
.flex-btn
.flex-card
.flex-img
.flex-text
text
.flex-btn

uhaha

ポイントはflex-direction: column;と flex-grow: 1;。これだけで.flex-textの高さがそろいました~

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*