フロントエンドのページでは、同じ高さのレイアウトが必要な場面によく遭遇します。最も直感的な方法は、コンテナ内のすべての要素をfloatまたはinline-blockに設定することです。
floatとinline-block
floatを使用する場合、親要素のコンテナを最初にクリアフィックスする必要があり、子要素にはマージンを設定する必要があります。 したがって、コンテンツが多すぎる場合や高さが不足している場合には、レイアウトが崩れる可能性があります。
さらに、このレイアウトの最大の欠点は、高さを設定する必要があるということです。
では、高さを設定しない場合はどうなるでしょうか？ min-heightを設定しても同じです。コンテンツが高さを超えると、必ずオーバーフローの危険に直面します。
後で、異なる画面幅で異なる高さを指定するために、CSSメディアクエリを直接使用することにしました。 解決策は少し面倒で、少し見た目も悪いですが、画面幅が狭すぎる場合のレイアウトの崩れを解決できます。
この問題は長い間心の中に隠れていましたが、最近、flexの秘密を発見しました。
レイアウトに困ったら、flexを考えてみましょう
人生で挫折した場合、flexを考えてみてください。このフレキシブルボックスはあなたを救うことがよくあります。 flexはほとんどの主要なブラウザでサポートされており、本当に便利です！
displayをflexに設定すると、子要素に高さが設定されていない場合、子要素の高さは最も高いものになります。
1つのプロパティで、私が朝思暮想していた問題が解決しました。本当にエレガントな 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というとても便利なものを無視するためのサポートの問題ではありません。
ただし、ブラウザが実際にサポートしていない場合は、レイアウトを行うためにJavaScriptを使用することができます。主な原則は、高さを設定せずに、コンテナ内のすべての要素を検出し、最も高い要素を見つけて、その高さを各要素に適用することです。
基本的な例のコードを書きました：
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を使用することをお勧めします！