event
hello@devera.vn (+84) 28 6295 8827

Thiết kế Responsive với CSS Flexbox

5 tháng 6, 2021 By DEVERA ACADEMY

Các UI engineer ngày nay luôn theo đuổi sự mới mẻ trong việc thiết kế tính năng responsive cho webpage của mình. CSS Flexbox cũng là một trong số vô vàn khái niệm liên quan đến lĩnh vực thiết kế Responsive mà bạn nên biết. Bởi, CSS Flexbox không chỉ giúp bạn thiết kế trang web hiển thị hợp lý và đẹp mắt trên mọi thiết bị, nó còn mang lại cho người dùng những trải nghiệm giao diện tuyệt vời.  

Flexbox là gì?

Flexbox là một mô hình bố cục trang Web giúp hỗ trợ xây dựng responsive bằng việc đơn giản hóa cách tổ chức các phần tử trên trang dựa trên hàng và cột theo hệ trục tọa độ.

Hãy nhìn vào hình phía trên và hình dung, bạn có thể thấy rằng các thành phần của flexbox (flex-container và flex-item) được dàn theo 2 trục bao gồm 1 trục chính (main axis) và 1 trục phụ (cross axis).

Trục chính sẽ là thành phần mô tả hướng của bố cục flexbox, trục phụ là chục vuông góc với trục chính để tạo thành một hệ trục.

Cùng đến với ví dụ để hiểu rõ hơn nhé! Giả sử rằng bạn muốn dàn 3 thẻ div theo chiều ngang, bạn có thể sử dụng flexbox với hướng trục chính theo hàng như ví dụ dưới đây:
index.html

<html>
<head>
    <title>Webpage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
       <div class="list">This is div 1</div> 
       <div class="list">This is div 2</div>
       <div class="list">This is div 3</div>
   </div>
</body>
</html>

style.css

.container {
display: flex;
flex-direction: row;
padding: 100px;
}
.list {
width: 100px;
height: 100%;
background: blue;
}

Sau khi chạy thử, ta sẽ có output thế này:


Tại sao cần sử dụng Flexbox?

Flexbox thường được sử dụng để sắp xếp các thành phần của trang web theo các hướng. Khi bạn bố trí các thành phần, Flexbox sẽ giúp bạn dàn trang và kiểm soát kích thước một cách cân đối đối và phù hợp với các kích thước hiển thị màn hình.
Trước khi Flexbox được sử dụng, chúng ta có thể tự dàn trang dựa trên mô hình box model bao gồm các phần: content, padding, border và margin.

Vậy thì Flexbox có ưu điểm gì?

  • Dàn trang linh hoạt với nhiều thuộc tính về hướng

  • Tự động căn chỉnh các flex-item với nhau và cân đối so với flex-container.

  • Bạn có thể chọn bố trí dọc theo một hướng trục chính hoặc bao bọc bởi cả hai trục

Còn khuyết điểm thì sao?

  • Một số trình duyệt không hỗ trợ Flexbox

  • Flexbox có thể làm tăng thời gian tải của trang web trong trường hợp project của bạn rất lớn

Hãy tìm hiểu nhiều hơn về Flexbox và áp dụng vào project của bạn để đem lại một thiết kế responsive linh hoạt nhé!


Tác giả Swapnil Kant

Dịch bởi Devera Academy