Highly identical typesetting solution

In front-end development, we often encounter the need for consistent heights in layout design. The most intuitive approach is to set all elements within a container to either float or inline-block.

float and inline-block

When using float for layout, not only do you need to clear the parent container (clearfix), but you also have to set margins on the child elements. This means that if the content is too much or the height is insufficient, layout issues will occur.

Additionally, the biggest drawback of this approach is that you must set a height.

So, what happens if you don’t set a height? Even if you specify a min-height, when the content exceeds that height, you will inevitably face overflow issues.

Eventually, I decided to use CSS media queries to assign different heights based on varying screen widths. While this solution is a bit cumbersome and not very elegant, it indeed resolved the problem of layout breaking when the width is too narrow.

This issue lingered in my mind until I recently discovered the secrets of flex.

When facing layout challenges, think about flex

When life throws you challenges, think about flex; this flexible box layout can often save the day. flex is supported by most mainstream browsers and is incredibly user-friendly!

When you set display to flex, if the child elements don't have a specified height, their height will automatically adjust to match the tallest element.

With just one line of code, I solved the problem I had been pondering over—how elegant is flex!

However, we still need to make a few adjustments to the layout. By default, if the flex-wrap property is not set, flex will display the elements in a single line, stretching the parent container. Therefore, we can add one more line.

.wrap {
  flex-wrap: wrap;
}

Now, we have a responsive layout with equal heights, without declaring a height. The CSS will look something like this:

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

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

What if the browser doesn’t support flex?

First of all, flex is already supported by most mainstream browsers, so don’t use compatibility as an excuse to overlook such a useful tool. However, if a browser truly doesn’t support it, you can achieve the layout using JavaScript. The main principle is to not set a height, detect the highest element within the container, and apply that height to each element.

Here’s a basic example code:

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"
})

Table is the new sexy

Although the traditional table layout has fallen out of favor, for scenarios like equal heights, if you unfortunately cannot use flex, you can utilize the table's properties to achieve equal-height layouts.

To implement a table layout, you can use display: table, display: table-row, and display: table-cell.

display: table is equivalent to <table>; display: table-row is equivalent to <tr>; and display: table-cell is equivalent to <td>.

However, while it achieves the effect of equal heights, the HTML markup becomes more complex. Additionally, tables still have some limitations in usage, such as margin not being effective inside a table, which can be a significant obstacle during mockup implementation. So, if you can achieve it with flex, it’s best to stick with flex!

Further Reading

Flexbox responsive equal height