×

Cách sử dụng flex - Tạo bố cục linh hoạt với Flexbox

Avatar of admin
admin 0 Views

Flexbox, hay còn gọi là Flexible Box Layout, là một trong những công nghệ vượt trội trong việc tạo ra các bố cục web hiện đại và linh hoạt. Khác với các phương pháp bố cục cũ như float và inline-block, công nghệ này đem đến những giải pháp đơn giản hơn và mạnh mẽ hơn trong việc điều chỉnh các phần tử trên trang web.

Bắt đầu với Flexbox

Để sử dụng Flexbox, bạn cần khai báo thuộc tính display: flex; cho phần tử chứa (hay còn gọi là flex container). Tất cả các phần tử con bên trong container này gọi là flex items và sẽ tuân theo các quy tắc của Flexbox.

.container {
  display: flex;
}

Các thuộc tính cơ bản của Flex Container

  1. Flex Direction: Thuộc tính này xác định hướng của các flex items bên trong container. Bạn có thể đặt theo hàng ngang (row) hoặc hàng dọc (column).
.container {
  flex-direction: row; /* mặc định */
  /* hoặc */
  flex-direction: column;
}
  1. Justify Content: Thuộc tính này quyết định cách phân bố không gian trống giữa các flex items theo trục chính.
.container {
  justify-content: flex-start; /* mặc định */
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}
  1. Align Items: Thuộc tính này căn chỉnh các flex items theo trục chéo (perpendicular axis).
.container {
  align-items: stretch; /* mặc định */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}
  1. Flex Wrap: Thuộc tính này cho phép các flex items chuyển sang hàng hoặc cột mới khi không đủ không gian trong container.
.container {
  flex-wrap: nowrap; /* mặc định */
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

Các thuộc tính cơ bản của Flex Items

  1. Order: Thuộc tính này xác định thứ tự sắp xếp của các flex items. Mặc định giá trị của thuộc tính này là 0.
.item {
  order: 1; /* mặc định là 0 */
}
  1. Flex Grow: Thuộc tính này xác định khả năng tăng trưởng của các flex items khi có không gian trống. Mặc định giá trị của thuộc tính này là 0.
.item {
  flex-grow: 1;
}
  1. Flex Shrink: Thuộc tính này xác định khả năng co lại của các flex items khi không đủ không gian trong container.
.item {
  flex-shrink: 1; /* mặc định */
}
  1. Flex Basis: Thuộc tính này thiết lập kích thước cơ sở của các flex items trước khi không gian dư thừa được phân chia theo flex-grow và flex-shrink.
.item {
  flex-basis: 200px; /* mặc định là auto */
}

Thực hành tạo bố cục linh hoạt

Để minh họa cách sử dụng Flexbox, ta sẽ tạo một ví dụ cụ thể. Xem đoạn mã dưới đây:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  background-color: lightblue;
  padding: 20px;
  flex-grow: 1;
  margin: 10px;
  text-align: center;
}

Với đoạn mã này, bạn sẽ có một container linh hoạt mà các phần tử bên trong nó sẽ tự điều chỉnh kích thước và vị trí để phù hợp với kích thước của cửa sổ trình duyệt.

Kết luận

Chiến thuật bố cục này không chỉ mang lại khả năng điều chỉnh linh hoạt, mà còn giúp việc xây dựng trang web trở nên dễ dàng và hiệu quả hơn rất nhiều. Nếu bạn chưa thử qua Flexbox, hãy bắt đầu ngay để trải nghiệm sự tiện lợi mà kỹ thuật này mang lại.

Comments

Bài viết liên quan