Cơ bản về Flexbox

5.1 Khái niệm cơ bản về Flexbox

Flexbox (Flexible Box Layout) — là một hệ thống bố cục CSS mạnh mẽ, cung cấp các cách linh hoạt và hiệu quả để phân chia không gian và căn chỉnh các phần tử trong container. Flexbox đặc biệt hữu ích cho việc tạo các bố cục phức tạp và thiết kế đa dụng. Giờ chúng ta sẽ tìm hiểu cơ bản về Flexbox, bao gồm việc tạo Flex-container và phần tử, cùng với việc sử dụng thuộc tính display: flex;.

Khái niệm cơ bản về Flexbox

Flexbox gồm hai thành phần chính:

• Flex-container: phần tử cha mà chứa các phần tử Flex.
• Phần tử Flex: các phần tử con trong Flex-container, được căn chỉnh và phân chia theo quy tắc của Flexbox.

Flex-container

Flex-container được tạo ra với thuộc tính display: flex; hoặc display: inline-flex; Flex-container quản lý vị trí của các phần tử con (phần tử Flex) và cung cấp nhiều khả năng để căn chỉnh và phân chia chúng.

    
      .container {
        display: flex; /* hoặc inline-flex */
      }
    
  

Ví dụ sử dụng:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <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>
    
  

Giải thích mã:

• .container: Flex-container, được tạo với display: flex;. Bên trong container này các phần tử được căn chỉnh và phân chia theo quy tắc của Flexbox
• .item: các phần tử Flex, là phần tử con của Flex-container

5.2 Thuộc tính của Flex-container

Thuộc tính display: flex; xác định phần tử như một Flex-container. Các phần tử con của container này tự động trở thành phần tử Flex và bắt đầu tuân theo quy tắc của Flexbox.

display: flex;

Tạo một Flex-container kiểu khối. Flex-container hoạt động như một phần tử khối, chiếm toàn bộ chiều rộng có sẵn của phần tử cha.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Tạo một Flex-container kiểu dòng. Flex-container hoạt động như một phần tử dòng, chỉ chiếm chiều rộng cần thiết, và có thể nằm cạnh các phần tử dòng khác.

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

Ví dụ sử dụng:

    
      .inline-container {
        display: inline-flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="inline-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>

      <div class="inline-container">
        <div class="item">Phần tử 4</div>
        <div class="item">Phần tử 5</div>
      </div>
    
  

Giải thích mã:

• inline-container — là Flex-container, được tạo bằng display: inline-flex; Bên trong container này, các phần tử được căn chỉnh và phân chia theo quy tắc của Flexbox. Các container hoạt động như phần tử dòng và nằm cạnh nhau.

5.3 Thuộc tính của Flex-element

1. Thuộc tính flex là một cách ghi tắt để định nghĩa flex-grow, flex-shrink và flex-basis. Nó cho phép kiểm soát cách các phần tử Flex co giãn để lấp đầy không gian có sẵn.

Cú pháp:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Ví dụ sử dụng:

    
      .item {
        flex: 1;
      }
    
  

2. Thuộc tính order

Thuộc tính order xác định thứ tự mà các phần tử Flex được sắp xếp trong Flex-container. Mặc định, tất cả các phần tử có giá trị order: 0;.

Giá trị

Số nguyên. Các phần tử có giá trị nhỏ hơn sẽ được đặt trước các phần tử có giá trị lớn hơn.

Cú pháp:

    
      .element {
        order: value;
      }
    
  

Ví dụ sử dụng:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item-1 {
        order: 2;
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Giải thích mã:

• .item-1: có giá trị order: 2, nên sẽ được đặt sau phần tử có order: 1
• .item-2: có giá trị order: 1, nên sẽ được đặt đầu tiên
• .item-3: có giá trị order: 3, nên sẽ được đặt cuối cùng