Hỏi đáp

Tìm hiểu về Flexbox trong CSS

avatar
Huy Erick
00:00 12/04/2024

Flexbox là gì? Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự 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ị. Thay vì phải...

Flexbox là gì? Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự 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ị. Thay vì phải thiết lập kích thước của từng phần tử, sử dụng float, bạn chỉ cần thiết lập phần tử hiển thị theo chiều ngang hay dọc và các phần tử bên trong sẽ hiển thị theo ý muốn.

Flexbox là một công nghệ mạnh mẽ để thiết lập bố cục trong phạm vi nhỏ như khung trong website. Tuy nhiên, khi thiết lập bố cục ở phạm vi lớn hơn như chia cột website, bạn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout).

Cấu trúc của Flexbox

Trong Flexbox, chúng ta có hai thành phần quan trọng là "container" và "item":

Xem thêm:

  • Container: là thành phần lớn bao quanh các phần tử bên trong. Bạn sẽ thiết lập kiểu hiển thị inline (sắp xếp theo chiều ngang) hoặc kiểu sắp xếp theo chiều dọc. Các phần tử bên trong sẽ hiển thị dựa trên thiết lập của container này.

  • Item: là các phần tử con của container. Bạn có thể thiết lập số cột mà mỗi item sẽ sử dụng trong một container, hoặc thiết lập thứ tự hiển thị của chúng.

Bên cạnh hai thành phần chính trên, còn có các thuật ngữ khác trong Flexbox như "main start", "main end", "cross start", "cross end", "main axis", "cross axis", "main size" và "cross size".

Bắt đầu với Flexbox

Để bắt đầu sử dụng Flexbox, bạn cần có một cấu trúc HTML đơn giản và sau đó thiết lập CSS để dễ nhìn từng thành phần.

Ví dụ, bạn có thể sử dụng HTML và CSS sau để tạo một bố cục đơn giản:


    
1

    
2

    
3

    
4

Khi thiết lập container với thuộc tính display: flex, các item sẽ chuyển từ sắp xếp dọc sang sắp xếp ngang trên cùng một hàng.

Nếu bạn muốn đổi trục, chỉ cần thêm thuộc tính flex-direction vào container. Ví dụ, flex-direction: row sẽ chuyển trục chính thành chiều ngang và flex-direction: column sẽ chuyển trục chính thành chiều dọc.

.container {
    display: flex;
    flex-direction: row;
}

Flexbox cung cấp nhiều thuộc tính khác nhau như flex-wrap, order, flex-grow, flex-shrink, flex-basis, justify-content,... để bạn có thể tạo ra các hiệu ứng và bố cục linh hoạt.

Flexbox trong CSS là một công nghệ mạnh mẽ và tiện dụng để tạo bố cục linh hoạt cho trang web của bạn. Dù hiện tại chưa phải tất cả trình duyệt đều hỗ trợ Flexbox, nhưng trong tương lai, chắc chắn đây là một trong những tính năng sẽ được nhiều trình duyệt hỗ trợ.

BÀI LIÊN QUAN
1