Niit - Ict Hà Nội » Tin tức » Tin tức công nghệ » UI Design: Giới thiệu về Flexible Box
UI Design: Giới thiệu về Flexible Box

Trong một bài trước, chúng ta đã thảo luận rằng các phần tử HTML về bản chất là một "Box". Theo truyền thống, khi chúng ta định vị các box đó, cho dù bên phải hay bên trái, chúng ta sử dụng thuộc tính float.

 

gioi-thieu-ve-flexbox-5

 

Có một nhược điểm nhất định khi chúng ta áp dụng kỹ thuật này, phần tử cha trực tiếp của .main và .sidebar sẽ thu gọn như minh họa bên dưới.

 

gioi-thieu-ve-flexbox-1

 

Vì vậy, chúng tôi chủ yếu cần phải áp dụng clearfix CSS cho phần tử cha để chống lại hiệu ứng này.

 

Flexible Box Module

 
Vì điều này đang trở thành một vấn đề thực tế phổ biến trong thiết kế web, W3C đã công bố một mô-đun mới có tên là Flexible Box hoặc đơn giản là Flexbox. Tuy nhiên, mô-đun này vẫn có những nhược điểm riêng của nó và cải thiện qua các năm.
 
 
cac-trinh-duyet-ho-tro-flexbox
 
Các phiên bản trình duyệt hiện tại hỗ trợ Flexbox
 

 

Để chứng minh tính năng CSS3 mới này, chúng tôi sẽ chuẩn bị cấu trúc HTML. Chúng tôi có 1 div chứa 2 div khác, như vậy.
 
gioi-thieu-ve-flexbox-6
 
 
Giả sử rằng cột bên trái là phần nội dung chính và cột bên phải là thanh bên. Vì vậy, như bạn có thể thấy, chúng tôi thêm nội dung (ngẫu nhiên) vào cột bên trái chứ không phải cột bên phải.
 
Như chúng tôi đã đề cập ở trên: Theo cách truyền thống, chúng ta sẽ làm một cái gì đó như thế này trong bảng định kiểu để định vị cột. Chúng tôi Float cột, chỉ định chiều rộng thích hợp cũng như bao gồm các clearfix CSS, như vậy.
 
gioi-thieu-ve-flexbox-7
 
 
Kết quả giống như mong đợi:
 
gioi-thieu-ve-flexbox-2
 
Với Flexbox, nó trở nên đơn giản hơn nhiều. Về mặt kỹ thuật, chúng ta chỉ cần đặt display của phần tử cha thành flex.
 
gioi-thieu-ve-flexbox-8
 
Thật thú vị, điều này cũng sẽ xác định chiều rộng thích hợp cho div bên trong mà không cần chúng ta xác định rõ ràng nó trong bảng định kiểu và đây là cách nó hiển thị ra.
 
ioi-thieu-ve-flexbox-3
 
Hơn nữa, chúng ta cũng có thể đặt flexbox thành phần tử con. Trong ví dụ sau, chúng tôi áp dụng nó vào cột bên trái.
 
Bây giờ, vì chúng ta có hai đoạn bên trong nó, chúng cũng sẽ được phân chia, như hình dưới đây.
 
gioi-thieu-ve-flexbox-4
 
 

Cú pháp Flexbox

 
Thực ra có nhiều cú pháp hơn được bao gồm trong Flexbox. Nếu bạn muốn thuần thục Flexbox hoặc muốn học lập trình web toàn tập thì cũng có thể tham khảo các Khóa học của NIIT - ICT Hà Nội.