Bài 21: Cách sử dụng Flex trong css

Cách sử dụng Links trong css

Flexbox là một kỹ thuật layout trong CSS giúp tạo ra các bố cục linh hoạt và dễ dàng điều chỉnh vị trí của các phần tử trên trang web. Khi sử dụng Flexbox, bạn có thể tạo ra các bố cục dạng hàng ngang, hàng dọc hoặc các bố cục phức tạp hơn.

Để sử dụng Flexbox trong CSS, bạn cần thiết lập thuộc tính display của phần tử cha thành flex. Sau đó, bạn có thể sử dụng các thuộc tính khác để điều chỉnh vị trí, kích thước, khoảng cách giữa các phần tử con.

Ví dụ, để tạo một bố cục đơn giản dạng hàng ngang với ba phần tử con, bạn có thể sử dụng mã CSS như sau:

HTML:

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

CSS 

.container {
  display: flex;
}

.item {
  margin-right: 10px;
}

Trong đó, thuộc tính display: flex được sử dụng để thiết lập phần tử cha thành một container Flexbox. Thuộc tính margin-right: 10px được sử dụng để tạo khoảng cách 10px giữa các phần tử con.

Các thuộc tính khác của Flexbox bao gồm:

1. flex-direction: Xác định hướng của các phần tử con (row, column, row-reverse, column-reverse).

2. justify-content: Xác định cách phân bố các phần tử con theo trục chính (start, end, center, space-between, space-around).

3. align-items: Xác định cách phân bố các phần tử con theo trục phụ (start, end, center, stretch, baseline).

4. flex-wrap: Xác định cách xử lý các phần tử con khi không đủ chỗ hiển thị (nowrap, wrap, wrap-reverse).

5. flex-grow: Xác định tỷ lệ phần trăm mà các phần tử con được mở rộng để điền đầy không gian trống.

6. flex-shrink: Xác định tỷ lệ phần trăm mà các phần tử con được thu nhỏ để tránh tràn qua kích thước của container.

Với các thuộc tính này, bạn có thể tạo ra các bố cục phức tạp hơn và tùy chỉnh vị trí của các phần tử trên trang web.