Flex height Boxes with CSS

Flex height Boxes with CSS

Hey guys few days back, I have faced a problem in cases, the problem there was 3 variable height boxes in my design, but I want all of them to be in same height. The height should be the largest box’s height. We cannot use the height property of cars because we cannot know what will be the height of the actual box. So we will use the CSS table and cell properties to accomplish this. It is very easy to create equal height columns with CSS, I’ve made a sample demo. Demo has three boxes of different heights that are displayed side by side. The contents of one of the boxes are vertically centered.

The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div element) behave like table cells.

The basic XHTML structure looks like this:

<div class="flex">
   <div class="row">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
   </div>
</div>

Here is the CSS used to make this structure behave like a table:

.flex {

display:table;

}
.row {

display:table-row;

}
.row div {

display:table-cell;

}
Hope this will help you.

Latest Blogs