まったく同じタイプセッティングソリューション

在フロントエンドのページでは、同じ高さのレイアウトが必要になることがよくあります。最も直感的な方法は、コンテナ内のすべての要素を float または inline-block に設定することです。

float と inline-block

float を使ったレイアウトの場合、まず親要素のコンテナをクリア（clearfix）する必要があり、さらに子要素にマージンを設定しなければなりません。 そのため、コンテンツが多すぎたり、高さが不足したりすると、レイアウトが崩れてしまいます。

また、この方法の最大の欠点は、高さを設定する必要があることです。

では、高さを設定しなかった場合はどうなるでしょうか？ min-height を設定しても同様で、コンテンツが高さを超えると、必ず overflow の危機に直面します。

その後、異なるスクリーン幅に対して CSS メディアクエリを使用してそれぞれ異なる高さを与えることに決めました。 この解決策は少し面倒で見た目も良くありませんが、幅が狭すぎるときにレイアウトが崩れる問題を確実に解決しました。

この問題は心の中に深く埋もれていましたが、最近 flex の秘密を発見しました。

レイアウトに困ったら、まずは flex を考えよう

人生で挫折を経験したとき、flex を考えてみてください。この弾性ボックスは、しばしばあなたを救ってくれます。 flex はすでにほとんどの主流ブラウザに対応しており、本当に使いやすいです！

display を flex に設定すると、子要素が高さを設定していない場合、子要素の高さはその中で最も高いものになります。

一行のプロパティで、私がずっと考えていた問題を解決してくれました。本当に優雅な flex です。

しかし、それだけではなく、レイアウトに対していくつかの調整が必要です。flex はデフォルトで flex-wrap プロパティが設定されていない場合、単一行表示で親コンテナを拡張します。 ですので、もう一行追加できます。

.wrap {
  flex-wrap: wrap;
}

これで、高さが同じレスポンシブレイアウトが、height を宣言せずに完成しました。大まかな CSS は次のようになります：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  height: auto;
  width: 30%;
  border: 1px solid #aaa;
}

flex をサポートしていないブラウザはどうする？

まず、flex はすでにほとんどの主流ブラウザに対応していますので、サポート状況を理由にこの使いやすい flex を無視するのはやめましょう。 しかし、もしブラウザが本当にサポートしていない場合、JS を使ってレイアウトを行うことができます。主な原理は、高さを設定せず、コンテナ内のすべての要素を検出し、最も高い高さを見つけて、その高さを各要素に適用することです。

基本的なサンプルコードを書きました：

var cards = document.querySelectorAll(".card")

function getMaxinumHeight(elements) {
  var nums = []

  elements.forEach(function(value) {
    nums.push(value.offsetHeight)
  })

  return nums.sort(function(a, b) {
    return a < b
  })[0]
}

var maxHeight = getMaxinumHeight(cards)
cards.forEach(value => {
  value.style.height = maxHeight + "px"
})

テーブルは新しいセクシー

古いテーブルレイアウトは捨てられましたが、高さを揃えるようなシーンでは、もし幸運にも flex を使用できない場合、テーブルの特性を利用して等高レイアウトを達成することができます。

テーブルレイアウトを完成させるには、display: table、display: table-row、display: table-cell を使用します。

display: table は <table> に相当し、display: table-row は <tr> に相当し、display: table-cell は <td> に相当します。

ただし、等高の効果を得られるものの、HTML のマークアップはより複雑になります。また、テーブルの使用にはいくつかの制限があり、例えば table 内でマージンが効かないなど、これらはモックアップを作成する際に大きな障害となります。ですので、可能であれば flex を使用すべきです！

参考文献

Flexbox responsive equal height