Tự động căn chỉnh chiều cao Cột bằng CSS

Flexbox là một kiểu dàn trang tự động cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Bạn không cần thiết lập kích thước của từng phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc. Bạn có thể tìm hiểu toàn bộ về Flexbox tại đây. Trong bài viết này tôi sẽ nói về một tip về căn chỉnh tự động chiều cao của các cột trong một trang. 

Vấn đề tôi gặp phải là khi thiết kế 1 giao diện web có 2 cột, trong đó các nội dung không đều nhau, dẫn đến các cột dài ngắn khác nhau, bạn sẽ sẽ không nhận thấy sự khác biệt nếu bạn không sử dụng border, nhưng khi bạn sử dụng Border thì thật sự nó là vấn đề. Có nhiều cách để khắc phục tuy nhiên theo tôi thì Flexbox là cách đơn giản và nhanh nhất. 
Bạn có thể tham khảo đoạn code dưới đây:

.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

Và cấu trúc các cột bạn chỉ đơn giản là sử dụng như sau:

<div class="row is-flex">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>