約束の地

キャロ組

MaterializeCSS の Cards の高さを揃える方法

MaterializeCSS とは

CSS のフレームワークです。

Cards Components

Materialize にはいわゆる「カード型」のコンポーネントを生成できる API*1 があります。

カードを並べると高さが揃わないことがある

このカードをそのまま並べていくと、以下のように高さが揃わないことがあります。

f:id:gregminster:20180610155150p:plain

高さを揃えるために CSS を書いて適用する

以下のようにカードの高さを揃えたいと思います。

f:id:gregminster:20180610155200p:plain

そのためには以下のように Flexbox の CSS を書いて適用してあげればよいです。

.flex {
  display: flex;
  flex-wrap: wrap;
}

適用する場所は col を包み込む row のところです。

<div class="row flex">
  <div class="col"></div>
  <div class="col"></div>
</div>

補足

カードの高さを同一にする(画像参照)ためにはそれぞれのカードの CSS に height: XXXpx; を与えればいいです。ただし、全てのカードが強制的に指定した高さになることには注意です*2

f:id:gregminster:20180610153017p:plain

あともう一点、カードの数が列数で割り切れない場合は、最終行で余りの分のカードが右側に寄ってしまいます。これは CSS で解決しないほうがスマートかと思いました*3

f:id:gregminster:20180610154946p:plain

参考(という名の答え)

*1:っていう言い方でいいんでしょうか

*2:「すべてのカードの中で最大の高さになるカードの高さ」が、きれいなレイアウト時の height に与えられる最低値となります

*3:確信ではないです

Powered by はてなブログ