Flexbox là gì? Tìm hiểu chi tiết về vai trò Flexbox trong ngôn ngữ lập trình CSS

Flexbox là gì? Nếu bạn cũng đang băn khoăn về câu hỏi này, hãy theo dõi bài viết mà FPT Shop chia sẻ dưới đây. Bài viết sẽ giúp bạn khám phá nhiều thông tin thú vị về thành phần quan trọng trong việc xây dựng và thiết kế website. Những vai trò chính của Flexbox trong CSS cũng như cách sử dụng một cách hiệu quả sẽ được giải thích chi tiết dưới đây.

Flexbox là gì?

Flexbox là một phương pháp bố cục (layout mode) cho phép các phần tử bên trong tự động điều chỉnh kích thước để hiển thị tốt trên mọi loại thiết bị. Nói cách khác, bạn không cần phải đặt kích thước cố định hoặc sử dụng thuộc tính float để căn chỉnh phần tử. Chỉ cần xác định xem bố cục sẽ theo chiều ngang hay dọc, các phần tử con sẽ tự sắp xếp theo ý muốn.

Theo khuyến nghị của Mozilla (Trình duyệt web Firefox), Flexbox phù hợp cho việc thiết lập bố cục trong phạm vi nhỏ, như các khung hoặc phần tử riêng lẻ trên trang web. Còn khi cần thiết kế bố cục lớn hơn, chẳng hạn như chia cột cho toàn bộ trang web, bạn nên sử dụng Grid Layout để có được sự sắp xếp hợp lý và linh hoạt hơn.

Thuật ngữ quan trọng trong Flexbox

Trước khi đi sâu vào cách sử dụng Flexbox, chúng ta cần hiểu cấu trúc cơ bản và một số thuật ngữ liên quan. Dưới đây là sơ đồ cấu trúc của Flexbox để bạn dễ hình dung hơn.

Hai thành phần quan trọng trong một bố cục Flexbox là container và item:

• Container: Đây là phần tử bao quanh các phần tử con bên trong. Container có thể được thiết lập để sắp xếp các item theo chiều ngang (inline) hoặc chiều dọc. Các item bên trong sẽ tuân theo kiểu sắp xếp mà bạn đã định nghĩa cho container.
• Item: Đây là các phần tử con nằm trong container. Bạn có thể kiểm soát kích thước hoặc số lượng cột mà item chiếm trong container, cũng như thứ tự hiển thị của chúng.

Bên cạnh hai thành phần chính này, còn có một số khái niệm khác như:

• Main start, main end: Đây là điểm bắt đầu và điểm kết thúc của trục chính (main axis) trong container. Các item được sắp xếp từ main start đến main end, hoặc kéo dài đến main end nếu được phép. Trục vuông góc với main axis được gọi là cross start và cross end, tương ứng là điểm bắt đầu và kết thúc trên trục vuông góc này.
• Main axis: Trục chính xác định hướng mà các item sẽ hiển thị. Nếu main axis là chiều ngang, các item sẽ sắp xếp theo hàng ngang, nhưng bạn có thể thay đổi trục này bằng thuộc tính flex-direction. Trục vuông góc với main axis được gọi là cross axis.
• Main size: Đây là kích thước (rộng hoặc cao) của mỗi item theo hướng của main axis.
• Cross size: Đây là kích thước (rộng hoặc cao) của mỗi item theo hướng của cross axis.

Các khái niệm này sẽ giúp bạn hiểu rõ hơn về cách Flexbox hoạt động để tạo ra bố cục linh hoạt và dễ quản lý.

Bắt đầu với Flexbox

Trước tiên, hãy tạo một cấu trúc HTML đơn giản như sau:

<div class="container">  

<div class="item item1">1</div>  

<div class="item item2">2</div>  

<div class="item item3">3</div>  

<div class="item item4">4</div>  

</div>

Tiếp theo, chúng ta sẽ thêm một đoạn CSS cơ bản để định dạng màu sắc và kích thước, giúp các phần tử trở nên dễ nhìn hơn:

/** Global CSS **/

.container {

background: red;

max-width: 960px;

max-height: 1000px;

margin: 0 auto;

padding: 5px;

}

.item {

background: blue;

margin: 5px;

color: white;

height: 50px;

text-align: center;

line-height: 50px;

}

Bây giờ, chúng ta sẽ bắt đầu sử dụng Flexbox. Để làm điều này, bạn chỉ cần đặt thuộc tính display: flex cho .container:

/** Flex layout **/

.container {

display: flex;

}

Kết quả: Các phần tử con với class item sẽ thay đổi cách sắp xếp từ dọc sang ngang, hiển thị trên cùng một hàng.

Nếu bạn muốn thay đổi hướng sắp xếp của các phần tử trong Flexbox, bạn chỉ cần thêm thuộc tính flex-direction vào container. Các giá trị của flex-direction bao gồm:

• row: Sắp xếp các phần tử theo hàng ngang, main axis sẽ là chiều ngang.
• column: Sắp xếp các phần tử theo cột dọc, main axis sẽ chuyển thành chiều dọc.
• row-reverse: Sắp xếp theo hàng ngang nhưng đảo ngược thứ tự của các phần tử.
• column-reverse: Sắp xếp theo cột dọc nhưng thứ tự các phần tử sẽ bị đảo ngược.

Rất đơn giản và dễ hiểu, phải không nào?

Sử dụng flex-wrap

Bây giờ, để minh họa thêm về cách hoạt động của Flexbox, hãy thử thêm thuộc tính width cho mỗi item là 1000px và xem điều gì sẽ xảy ra:

.item {

width: 1000px;

}

Hãy cùng xem kết quả nhé!

Như bạn thấy, khi chúng ta đặt chiều rộng của mỗi item là 1000px, các phần tử vẫn xếp đều trên cùng một hàng. Điều này là do Flexbox mặc định sắp xếp tất cả các item theo trục chính (main axis) trong một hàng, bất kể kích thước của chúng có vượt quá chiều rộng của container hay không. Do đó, các phần tử không bị tràn hoặc hiển thị lộn xộn.

Bây giờ, hãy thêm thuộc tính flex-wrap: wrap vào container để các phần tử có thể tự động xuống hàng khi không đủ không gian:

.container {

display: flex;

flex-wrap: wrap;

}

Kết quả sẽ là:

Thuộc tính flex-wrap cho phép container bọc các item lại khi kích thước của chúng thay đổi, thay vì giữ tất cả các phần tử trên một hàng. Mặc định, Flexbox sử dụng giá trị nowrap, nghĩa là các item sẽ luôn hiển thị trên một hàng duy nhất. Bạn có thể áp dụng flex-wrap để sắp xếp các item theo cả chiều ngang và chiều dọc một cách linh hoạt.

Thuộc tính order

Trong ví dụ HTML của chúng ta, mỗi item có thứ tự được gán sẵn từ 1 đến 4 với các class .item1, .item2, .item3, và .item4. Mặc định, các item sẽ hiển thị theo thứ tự đã được khai báo trong HTML. Tuy nhiên, bằng cách sử dụng thuộc tính order, chúng ta có thể thay đổi thứ tự hiển thị của các item như sau:

.item1 {

order: 4;

}

.item2 {

order: 3;

}

.item3 {

order: 1;

}

.item4 {

order: 2;

}

Kết quả: Các item sẽ được sắp xếp lại theo thứ tự mà bạn đã chỉ định bằng thuộc tính order, bất kể thứ tự ban đầu trong HTML.

Bạn sẽ thấy rằng thứ tự sắp xếp của các mục đã thay đổi theo thuộc tính order. Nhờ đó, chúng ta sẽ dễ dàng điều chỉnh vị trí xuất hiện của các phần tử trên cùng một hàng.

Để minh họa điều này, trước tiên, hãy tắt chức năng wrap và thiết lập chiều rộng của mỗi mục là 50px.

Bây giờ, hãy thử thiết lập giá trị flex-grow: 1 cho .item2:

.item2 {

flex-grow: 1;

}

Kết quả:

Khi bạn thiết lập flex-grow: 1 cho .item2, nó sẽ chiếm lấy phần không gian trống còn lại trong container. Bây giờ, hãy thử thiết lập flex-grow: 2 cho .item1:

.item1 {

flex-grow: 2;

}

Giá trị flex-grow: 2 sẽ lấy phần không gian dư gấp đôi so với flex-grow: 1.

flex-shrink

Mặc định, tất cả các phần tử đều có giá trị flex-shrink là 1. Điều này có nghĩa là khi bạn thu nhỏ kích thước của trình duyệt, các phần tử sẽ co lại bằng nhau. Tuy nhiên, nếu bạn muốn .item3 co lại nhiều hơn so với các phần tử khác, bạn có thể tăng giá trị flex-shrink của nó.

.item3 {

flex-shrink: 2;

}

flex-basis

flex-basis cho phép bạn gán một kích thước nhất định cho phần tử. Bạn có thể sử dụng giá trị tuyệt đối hoặc tương đối dựa trên kích thước của container.

.item3 {

flex-basis: 500px;

}

justify-content

Mặc định, các phần tử bên trong container sẽ được phân bố đều từ đầu đến cuối. Tuy nhiên, nếu container vẫn còn khoảng trống, bạn có thể sử dụng thuộc tính justify-content để điều chỉnh vị trí của chúng.

justify-content có 5 giá trị khác nhau. Bạn có thể tham khảo hình ảnh bên dưới từ CSS Tricks để hiểu rõ hơn về ý nghĩa của từng giá trị.

Ví dụ:

.container {

display: flex;

justify-content: flex-end;

}

Kết quả: Các phần tử trong container sẽ được căn chỉnh về phía bên phải.

Bạn cũng có thể thử nghiệm với các thuộc tính khác trong Flexbox.

Trên đây là một số thuộc tính phổ biến trong Flexbox.

Lời kết

Flexbox trong CSS là một công cụ bố cục hiện đại, thay thế hiệu quả cho phương pháp dàn trang truyền thống như float. Flexbox đặc biệt phù hợp khi sử dụng để sắp xếp các thành phần nhỏ trong giao diện, giúp hạn chế việc sử dụng float không cần thiết và tối ưu hóa bố cục linh hoạt.

Hiện nay, hầu hết các trình duyệt hiện đại đã hỗ trợ Flexbox đầy đủ, giúp việc triển khai trở nên thuận tiện hơn. Cảm ơn bạn đã dành thời gian theo dõi bài viết!

Nếu bạn đang tìm kiếm chiếc laptop cho công việc lập trình, mời bạn đến FPT Shop khám phá và mua sắm ngay. Tại FPT Shop, bạn sẽ dễ dàng tìm thấy nhiều dòng máy tính xách tay với giá cả hợp lý và cấu hình mạnh mẽ.

Tham khảo dòng laptop Dell giá rẻ tại đây:

• Laptop Dell

Xem thêm

• CSS là gì? Khám phá tính ứng dụng của CSS thông qua các phiên bản cụ thể
• Position CSS là gì? Những thuộc tính quan trọng cần biết để thiết kế website thành công