Phân bổ không gian

9.1 Thuộc tính flex-grow

Trong Flexbox có nhiều công cụ khác nhau để quản lý việc phân bố không gian giữa các phần tử bên trong Flex-container. Các thuộc tính flex-grow, flex-shrink và flex-basis đóng vai trò quan trọng trong việc kiểm soát kích thước và hành vi của các phần tử Flex dưới các điều kiện khác nhau. Bây giờ chúng ta sẽ tìm hiểu chi tiết từng thuộc tính này và cách sử dụng chúng.

Thuộc tính flex-grow xác định khả năng của một phần tử Flex mở rộng kích thước để chiếm không gian có sẵn trong container. Giá trị flex-grow là một hệ số, chỉ định mức độ phần tử có thể mở rộng ra so với các phần tử Flex khác.

Giá trị:

• Số nguyên hoặc giá trị thập phân
• Giá trị mặc định: 0 (phần tử không mở rộng)

Ví dụ sử dụng:

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

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

Giải thích mã:

• .grow-1: các phần tử này có giá trị flex-grow: 1;, cho phép chúng mở rộng đều đặn
• .grow-2: phần tử này có giá trị flex-grow: 2;, cho phép nó mở rộng gấp đôi so với các phần tử có flex-grow: 1;

9.2 Thuộc tính flex-shrink

Thuộc tính flex-shrink xác định khả năng của một phần tử Flex bị thu nhỏ lại nếu không gian trong container bị hạn chế. Giá trị flex-shrink là một hệ số, chỉ định mức độ phần tử có thể thu nhỏ lại so với các phần tử Flex khác.

Giá trị:

• Số nguyên hoặc giá trị thập phân
• Giá trị mặc định: 1 (phần tử có thể thu nhỏ lại)

Ví dụ sử dụng:

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

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

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

Giải thích mã:

• .shrink-0: phần tử này có giá trị flex-shrink: 0;, không cho phép nó thu nhỏ lại
• .shrink-1: các phần tử này có giá trị flex-shrink: 1;, cho phép chúng thu nhỏ lại khi cần thiết

9.3 Thuộc tính flex-basis

Thuộc tính flex-basis xác định kích thước ban đầu của một phần tử Flex trước khi phân bố không gian trống. Nó có thể được chỉ định bằng các đơn vị đo lường khác nhau, như pixel, phần trăm và các đơn vị khác.

Giá trị:

• Kích thước trong các đơn vị khác nhau (px, %, em và v.v.)
• Giá trị mặc định: auto (kích thước được xác định bởi nội dung)

Ví dụ sử dụng:

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Phần tử 1</div>
        <div class="item basis-100px">Phần tử 2</div>
        <div class="item basis-50percent">Phần tử 3</div>
      </div>
    
  

Giải thích mã:

• .basis-auto: phần tử này có giá trị flex-basis: auto;, nghĩa là kích thước của nó được xác định bởi nội dung
• .basis-100px: phần tử này có kích thước ban đầu cố định là 100 pixel
• .basis-50percent: phần tử này có kích thước ban đầu bằng 50% chiều rộng của container

9.4 Sử dụng các thuộc tính

Thuộc tính flex là một cách viết tắt để chỉ định flex-grow, flex-shrink và flex-basis. Nó cho phép quản lý cả ba khía cạnh phân bố không gian trong một thuộc tính duy nhất.

Cú pháp:

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

Ví dụ sử dụng:

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

Giải thích mã:

• .flex-1: phần tử này có flex: 1 1 auto;, nghĩa là nó có thể mở rộng và thu nhỏ đều đặn với các phần tử khác, và kích thước ban đầu của nó được xác định bởi nội dung
• .flex-2: phần tử này có flex: 2 1 100px;, nghĩa là nó có thể mở rộng gấp đôi so với các phần tử có flex-grow: 1;, có thể thu nhỏ và có kích thước ban đầu là 100 pixel
• .flex-3: phần tử này có flex: 1 0 50%;, nghĩa là nó có thể mở rộng, nhưng không thể thu nhỏ, và kích thước ban đầu của nó là 50% chiều rộng của container