64. Flexbox Trong CSS

Flexbox trong CSS:

Flexbox (Flexible Box Layout) là một mô hình bố trí trong CSS giúp bạn dễ dàng xây dựng giao diện linh hoạt và phản hồi. Nó cho phép bạn sắp xếp các phần tử con bên trong một phần tử cha một cách dễ dàng và linh hoạt, đồng thời điều chỉnh các phần tử để phù hợp với kích thước màn hình.

Dưới đây là một ví dụ cơ bản về cách sử dụng Flexbox để tạo một dãy các hộp:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
    }

    .flex-item {
      flex: 1;
      padding: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử cha có class .flex-container và áp dụng display: flex; để kích hoạt mô hình Flexbox cho phần tử này.
Sử dụng class .flex-item cho các phần tử con. Thuộc tính flex: 1; cho .flex-item tỷ lệ chia các phần tử con thành tỉ lệ bằng nhau trong phần tử cha. Các phần tử sẽ được căn chỉnh cùng một hàng ngang.
Sử dụng padding, border, và text-align để tạo kiểu cho các phần tử con.

Vui lòng lưu ý rằng Flexbox còn có nhiều tính năng và thuộc tính khác để tạo giao diện phức tạp hơn. Nếu bạn muốn tìm hiểu thêm về Flexbox, bạn có thể tìm kiếm tài liệu hoặc hướng dẫn chính thức từ W3C.

Dưới đây là một ví dụ cụ thể hơn về việc sử dụng Flexbox để tạo một giao diện đơn giản với các mục sắp xếp dọc và ngang:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      background-color: #f0f0f0;
      padding: 20px;
    }

    .flex-item {
      flex: 1 1 calc(33.33% - 20px);
      margin: 10px;
      padding: 15px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử cha có class .flex-container và sử dụng display: flex; để áp dụng mô hình Flexbox.
Sử dụng justify-content: space-between; để căn chỉnh các phần tử con theo hàng ngang và để chúng cách đều nhau.
Sử dụng align-items: center; để căn chỉnh các phần tử con theo chiều dọc để chúng nằm chính giữa dọc.
Sử dụng flex-wrap: wrap; để các phần tử con tự động xuống dòng khi không đủ chỗ.
Sử dụng flex: 1 1 calc(33.33% - 20px); để tỷ lệ chia các phần tử con thành ba cột dọc và căn chỉnh chúng để cách đều nhau ngang.
Sử dụng các thuộc tính khác để tạo kiểu cho các phần tử con.

Ví dụ này tạo ra một giao diện đơn giản với các phần tử sắp xếp theo hàng dọc và cột ngang sử dụng Flexbox.

Leave a Comment Cancel Reply