Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Hướng của trục

Hướng của trục

Frontend SELF VI
Mức độ , Bài học
Có sẵn

6.1 Thuộc tính flex-direction

Flexbox cung cấp các công cụ linh hoạt và mạnh mẽ để tạo ra bố cục đáp ứng. Phần quan trọng của hệ thống này là trục bố trí, xác định cách các phần tử Flex sẽ được sắp xếp bên trong Flex-container. Dưới đây, chúng ta sẽ xem xét chi tiết các thuộc tính flex-direction và flex-wrap, những thứ điều khiển hướng của các trục và hành vi của các phần tử Flex khi bị tràn.

Thuộc tính flex-direction xác định hướng của trục chính, theo đó các phần tử Flex sẽ được sắp xếp. Hướng này có thể là ngang hoặc dọc, cũng như xuôi hoặc ngược lại.

Giá trị:

  • row: trục chính đi theo chiều ngang từ trái sang phải (giá trị mặc định)
  • row-reverse: trục chính đi theo chiều ngang từ phải sang trái
  • column: trục chính đi theo chiều dọc từ trên xuống
  • column-reverse: trục chính đi theo chiều dọc từ dưới lên

Ví dụ sử dụng

1. Các phần tử được sắp xếp theo chiều ngang:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <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-row-reverse">
        <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>
Kotlin

2. Các phần tử được sắp xếp theo chiều dọc:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <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-column-reverse">
        <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-row: các phần tử sắp xếp theo chiều ngang từ trái sang phải
  • .container-row-reverse: các phần tử sắp xếp theo chiều ngang từ phải sang trái
  • .container-column: các phần tử sắp xếp theo chiều dọc từ trên xuống
  • .container-column-reverse: các phần tử sắp xếp theo chiều dọc từ dưới lên

6.2 Thuộc tính flex-wrap

Thuộc tính flex-wrap xác định liệu các phần tử Flex có được chuyển sang dòng/cột mới nếu không thể nằm trong hàng đơn hay không. Điều này đặc biệt hữu ích cho việc tạo bố cục đáp ứng, nơi kích thước của container có thể thay đổi tùy thuộc vào thiết bị hoặc màn hình.

Giá trị

  • nowrap: các phần tử không được chuyển và nằm trong một hàng/cột đơn (giá trị mặc định)
  • wrap: các phần tử được chuyển sang dòng/cột mới nếu cần
  • wrap-reverse: các phần tử được chuyển sang dòng/cột mới theo thứ tự ngược lại

Ví dụ sử dụng

Giá trị nowrap:

Các phần tử không được chuyển và nằm trong một hàng/cột đơn (giá trị mặc định).

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <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 class="item">Phần tử 4</div>
      </div>

Giá trị wrap:

Các phần tử được chuyển sang dòng/cột mới nếu cần.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <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 class="item">Phần tử 4</div>
      </div>

Giá trị wrap-reverse:

Các phần tử được chuyển sang dòng/cột mới theo thứ tự ngược lại.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <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 class="item">Phần tử 4</div>
      </div>

Giải thích mã:

  • .container-nowrap: Các phần tử Flex nằm trong một hàng, ngay cả khi chúng vượt quá kích thước của container
  • .container-wrap: Các phần tử Flex được chuyển sang dòng mới nếu không thể nằm trong một hàng
  • .container-wrap-reverse: Các phần tử Flex được chuyển sang dòng mới theo thứ tự ngược lại

6.3 Sử dụng flex-direction và flex-wrap

Thuộc tính flex-direction và flex-wrap có thể được kết hợp bằng cách sử dụng thuộc tính rút gọn flex-flow. Thuộc tính này cho phép chỉ định cả hướng trục và chuyền các phần tử cùng một lúc.

Cú pháp:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Ví dụ sử dụng:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <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 class="item">Phần tử 4</div>
        <div class="item">Phần tử 5</div>
      </div>

Giải thích mã:

  • .container: Flex-container với sự kết hợp sử dụng flex-direction: row; và flex-wrap: wrap;, nghĩa là các phần tử sắp xếp theo chiều ngang và chuyển sang dòng mới nếu cần.
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION