Căn chỉnh theo trục ngang

8.1 Thuộc tính align-items

Thuộc tính align-items và align-self cho phép bạn căn chỉnh các phần tử Flex theo trục ngang, mang lại sự linh hoạt và chính xác trong bố cục.

Thuộc tính align-items điều khiển căn chỉnh các phần tử Flex theo trục ngang (vuông góc với trục chính) bên trong Flex-container. Trục ngang phụ thuộc vào giá trị của thuộc tính flex-direction:

• Nếu flex-direction có giá trị row hoặc row-reverse, trục ngang sẽ là dọc
• Nếu flex-direction có giá trị column hoặc column-reverse, trục ngang sẽ là ngang

Các giá trị:

• stretch: các phần tử kéo dài để lấp đầy container (giá trị mặc định)
• flex-start: các phần tử được căn chỉnh từ đầu container
• flex-end: các phần tử được căn chỉnh từ cuối container
• center: các phần tử được căn chỉnh ở giữa container
• baseline: các phần tử được căn chỉnh theo đường cơ bản của văn bản

Ví dụ sử dụng:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

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

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

    
      <div class="container align-stretch">
        <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="container align-flex-start">
        <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>
    
  

8.2 Thuộc tính align-self

Thuộc tính align-self cho phép ghi đè giá trị align-items cho một phần tử Flex cụ thể. Thuộc tính này được áp dụng trực tiếp cho phần tử Flex và kiểm soát việc căn chỉnh của nó theo trục ngang bên trong Flex-container.

Các giá trị:

• auto: giá trị được thừa hưởng từ cha mẹ (mặc định)
• stretch: phần tử kéo dài để lấp đầy container
• flex-start: phần tử được căn chỉnh từ đầu container
• flex-end: phần tử được căn chỉnh từ cuối container
• center: phần tử được căn chỉnh ở giữa container
• baseline: phần tử được căn chỉnh theo đường cơ bản của văn bản

Ví dụ sử dụng:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

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

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Phần tử 3</div>
        <div class="item self-center">Phần tử 4</div>
        <div class="item self-baseline">Phần tử 5</div>
      </div>
    
  

Giải thích mã:

• .self-flex-end: phần tử này được căn chỉnh theo cạnh dưới của container
• .self-center: phần tử này được căn chỉnh ở giữa theo chiều dọc
• .self-baseline: phần tử này được căn chỉnh theo đường cơ bản của văn bản

8.3 Căn giữa phần tử

Flexbox cho phép dễ dàng căn giữa các phần tử theo chiều dọc và ngang, sử dụng sự kết hợp justify-content và align-items hoặc align-self.

Ví dụ sử dụng:

    
      .center-container {
        display: flex;
        justify-content: center; /* căn giữa theo chiều ngang */
        align-items: center; /* căn giữa theo chiều dọc */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Phần tử căn giữa</div>
      </div>
    
  

Giải thích mã:

• .center-container: Flex-container, trong đó các phần tử được căn giữa theo chiều ngang bằng justify-content: center; và theo chiều dọc bằng align-items: center;
• .center-item: Flex-element, được căn chỉnh ở giữa container