Khái niệm

Flexbox là một module CSS giúp chúng ta sắp xếp các phần tử trong một container theo một cách linh hoạt và dễ dàng điều chỉnh. Các phần tử con trong container có thể được xếp theo hàng ngang hoặc hàng dọc và có thể co dãn hoặc co lại tùy thuộc vào không gian còn lại.

Ứng dụng RWD

Xây dựng container

Trước tiên, chúng ta cần xác định một container chứa các phần tử con. Để làm điều này, chúng ta sẽ sử dụng thuộc tính display: flex; cho container.

.container {
  display: flex;
}

Xác định kích thước của các phần tử con

Tiếp theo, chúng ta cần xác định kích thước ban đầu của các phần tử con trong container. Để làm điều này, chúng ta sử dụng thuộc tính flex-basis để xác định kích thước ban đầu và thuộc tính flex-grow để xác định tỉ lệ mở rộng của các phần tử con so với các phần tử cùng cấp khác.

.item {
  flex-basis: 200px; /* Kích thước ban đầu của mỗi phần tử con */
  flex-grow: 1; /* Tỉ lệ mở rộng của các phần tử con */
}

Xác định sự co dãn và co lại của các phần tử con

Để các phần tử con có thể co dãn hoặc co lại tùy thuộc vào không gian còn lại, chúng ta sử dụng thuộc tính flex-shrink. Nếu chúng ta muốn các phần tử con không bao giờ co lại, chúng ta có thể đặt giá trị của thuộc tính này là 0.

.item {
  flex-shrink: 1; /* Tỉ lệ co lại của các phần tử con */
}

Xếp các phần tử con theo hàng ngang hoặc hàng dọc

Mặc định, các phần tử con sẽ được xếp theo hàng ngang. Tuy nhiên, chúng ta có thể chuyển chúng thành hàng dọc bằng cách sử dụng thuộc tính flex-direction với giá trị là column.

.container {
  flex-direction: column; /* Xếp các phần tử con theo hàng dọc */
}

Chia các phần tử con thành nhiều dòng

Nếu không đủ không gian để hiển thị tất cả các phần tử con trong một hàng duy nhất, chúng ta có thể chia chúng thành nhiều dòng bằng cách sử dụng thuộc tính flex-wrap với giá trị là wrap.

.container {
  flex-wrap: wrap; /* Chia các phần tử con thành nhiều dòng */
}

Sắp xếp các phần tử con theo chiều ngược lại

Nếu muốn sắp xếp các phần tử con theo chiều ngược lại, chúng ta có thể sử dụng thuộc tính flex-direction với giá trị là row-reverse để xếp các phần tử con từ phải sang trái hoặc column-reverse để xếp các phần tử con từ dưới lên.

.container {
  flex-direction: row-reverse; /* Sắp xếp các phần tử con từ phải sang trái */
}

Flex properties

Flex CSS gồm có 3 thuộc tính liên tiếp, lần lượt là flex-grow, flex-shrink, flex-basic

.item{
  flex: 1 2 200px
}

Trong ví dụ trên, flex sẽ có các giá trị như sau:

• flex-grow có giá trị là 1
• flex-shrink có giá trị là 2
• flex-basis có giá trị là 200px

Ví dụ

Dưới đây là một ví dụ minh họa về cách sử dụng thuộc tính flex để tạo giao diện responsive:

HTML

<div class="container">
  <div class="item">Phần tử 1</div>
  <div class="item">Phần tử 2</div>
  <div class="item">Phần tử 3</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
}

Trong ví dụ trên, các phần tử con trong container sẽ tự động co dãn và co lại tùy thuộc vào không gian còn lại. Kích thước ban đầu của các phần tử con là 200px và chúng sẽ được sắp xếp thành nhiều dòng khi không đủ không gian.