CSS3 ra mắt 2 giá trị mới cho thuộc tính display là flex và inline-flex, giúp sắp xếp, bố cục các thành phần khối (block) một cách dễ dàng, linh hoạt hơn trước.
display: flex và display: inline-flex và các thuộc tính đi kèm được sử dụng khá nhiều trong việc xử lý các cấu trúc, nếu như trước đây đôi lúc cần Javascript để hỗ trợ, thì giờ đây display flex sẽ giúp xử lý nhiều cấu trúc phức tạp một cách dễ dàng.
<div class="flex"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> </div>
Ở nội dung HTML sẽ có một thẻ div với class là flex bao ngoài các thẻ div chứa nội dung, thẻ bao ngoài này sẽ đảm nhận việc chia các thẻ bên trong thành các cột.
<style>
/* flex */
.flex{
display:flex;
}
</style>
CSS với display:flex hoặc display:inline-flex;