in English

Uốn cong

Nhanh chóng quản lý bố cục, căn chỉnh và định cỡ cột lưới, điều hướng, thành phần, v.v. với bộ đầy đủ các tiện ích flexbox đáp ứng. Đối với các triển khai phức tạp hơn, CSS tùy chỉnh có thể cần thiết.

Trên trang này

Bật các hành vi linh hoạt

Áp dụng displaycác tiện ích để tạo vùng chứa flexbox và chuyển đổi các phần tử con trực tiếp thành các mục linh hoạt. Có thể sửa đổi thêm các thùng chứa và vật phẩm uốn dẻo với các đặc tính linh hoạt bổ sung.

Tôi là một container flexbox!

html

<div class="d-flex p-2">I'm a flexbox container!</div>

Tôi là một container flexbox nội tuyến!

html

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Các biến thể đáp ứng cũng tồn tại cho .d-flexvà .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex

Hướng đi

Đặt hướng của các mục linh hoạt trong một vùng chứa linh hoạt với các tiện ích định hướng. Trong hầu hết các trường hợp, bạn có thể bỏ qua lớp ngang ở đây như mặc định của trình duyệt row. Tuy nhiên, bạn có thể gặp phải những trường hợp cần đặt giá trị này một cách rõ ràng (như bố cục đáp ứng).

Sử dụng .flex-rowđể đặt hướng ngang (mặc định của trình duyệt) hoặc .flex-row-reverseđể bắt đầu hướng ngang từ phía đối diện.

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

html

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Sử dụng .flex-columnđể thiết lập hướng thẳng đứng hoặc .flex-column-reverseđể bắt đầu hướng thẳng đứng từ phía đối diện.

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

html

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Các biến thể đáp ứng cũng tồn tại cho flex-direction.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Căn chỉnh nội dung

Sử dụng justify-contentcác tiện ích trên vùng chứa flexbox để thay đổi căn chỉnh của các mục flex trên trục chính (trục x để bắt đầu, trục y nếu flex-direction: column). Chọn từ (mặc định của starttrình duyệt ) end,,, hoặc .centerbetweenaroundevenly

Mục linh hoạt

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Các biến thể đáp ứng cũng tồn tại cho justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Căn chỉnh các mặt hàng

Sử dụng align-itemscác tiện ích trên vùng chứa flexbox để thay đổi căn chỉnh của các mục flex trên trục chéo (trục y để bắt đầu, trục x nếu flex-direction: column). Chọn từ start,, hoặc ( endmặc centerđịnh của trình duyệt).baselinestretch

Mục linh hoạt

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Các biến thể đáp ứng cũng tồn tại cho align-items.

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Căn chỉnh bản thân

Sử dụng align-selfcác tiện ích trên các mục flexbox để thay đổi riêng từng căn chỉnh của chúng trên trục chéo (trục y để bắt đầu, trục x nếu flex-direction: column). Chọn từ các tùy chọn tương tự như : align-items,,, starthoặc ( mặc định của trình duyệt).endcenterbaselinestretch

Mục linh hoạt

Mục linh hoạt được căn chỉnh

Mục linh hoạt

Mục linh hoạt được căn chỉnh

Mục linh hoạt

Mục linh hoạt được căn chỉnh

Mục linh hoạt

Mục linh hoạt được căn chỉnh

Mục linh hoạt

Mục linh hoạt được căn chỉnh

Mục linh hoạt

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Các biến thể đáp ứng cũng tồn tại cho align-self.

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Lấp đầy

Sử dụng .flex-filllớp trên một loạt các phần tử anh em để buộc chúng có chiều rộng bằng với nội dung của chúng (hoặc chiều rộng bằng nhau nếu nội dung của chúng không vượt qua khung viền của chúng) trong khi chiếm tất cả không gian ngang có sẵn.

Mục linh hoạt với nhiều nội dung

Mục linh hoạt

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Các biến thể đáp ứng cũng tồn tại cho flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

Phát triển và co lại

Sử dụng .flex-grow-*các tiện ích để chuyển đổi khả năng phát triển của một mục linh hoạt để lấp đầy không gian có sẵn. Trong ví dụ dưới đây, các .flex-grow-1phần tử sử dụng tất cả không gian có sẵn mà nó có thể, đồng thời cho phép hai mục còn lại linh hoạt không gian cần thiết của chúng.

Mục linh hoạt

Mặt hàng linh hoạt thứ ba

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Sử dụng .flex-shrink-*các tiện ích để chuyển đổi khả năng co lại của một mục linh hoạt nếu cần thiết. Trong ví dụ dưới đây, mục linh hoạt thứ hai với .flex-shrink-1buộc phải bọc nội dung của nó thành một dòng mới, "thu nhỏ" để có thêm không gian cho mục linh hoạt trước đó .w-100.

Mục linh hoạt

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Các biến thể đáp ứng cũng tồn tại cho flex-growvà flex-shrink.

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Lề tự động

Flexbox có thể thực hiện một số điều khá tuyệt vời khi bạn kết hợp căn chỉnh flex với lề tự động. Dưới đây là ba ví dụ về việc kiểm soát các mục linh hoạt thông qua lề tự động: mặc định (không có lề tự động), đẩy hai mục sang phải ( .me-auto) và đẩy hai mục sang trái ( .ms-auto).

Mục linh hoạt

html

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Với các mục căn chỉnh

Di chuyển thẳng đứng một mục linh hoạt lên trên cùng hoặc dưới cùng của thùng chứa bằng cách trộn align-items, flex-direction: columnvà margin-top: autohoặc margin-bottom: auto.

Mục linh hoạt

html

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Bọc

Thay đổi cách bọc vật phẩm linh hoạt trong hộp đựng linh hoạt. Chọn hoàn toàn không gói (mặc định của trình duyệt) với .flex-nowrap, gói bằng .flex-wraphoặc ngược gói với .flex-wrap-reverse.

Mục linh hoạt

<div class="d-flex flex-nowrap">
  ...
</div>

Mục linh hoạt

<div class="d-flex flex-wrap">
  ...
</div>

Mục linh hoạt

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Các biến thể đáp ứng cũng tồn tại cho flex-wrap.

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Gọi món

Thay đổi thứ tự trực quan của các mục linh hoạt cụ thể với một số ordertiện ích. Chúng tôi chỉ cung cấp các tùy chọn để tạo một mục đầu tiên hoặc cuối cùng, cũng như đặt lại để sử dụng đơn đặt hàng DOM. Khi ordernhận bất kỳ giá trị số nguyên nào từ 0 đến 5, hãy thêm CSS tùy chỉnh cho bất kỳ giá trị bổ sung nào cần thiết.

Mục linh hoạt đầu tiên

Mục linh hoạt thứ hai

Mặt hàng linh hoạt thứ ba

html

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Các biến thể đáp ứng cũng tồn tại cho order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Ngoài ra, cũng có các lớp đáp ứng .order-firstvà thay đổi thành phần của một phần tử bằng cách áp dụng và tương ứng..order-lastorderorder: -1order: 6

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Căn chỉnh nội dung

Sử dụng align-contentcác tiện ích trên vùng chứa flexbox để sắp xếp các mục flex với nhau trên trục chéo. Chọn từ (mặc định của starttrình duyệt ) end,,, hoặc . Để chứng minh những tiện ích này, chúng tôi đã thực thi và tăng số lượng các hạng mục linh hoạt.centerbetweenaroundstretchflex-wrap: wrap

Đứng lên! Thuộc tính này không ảnh hưởng đến các hàng linh hoạt đơn lẻ.

Mục linh hoạt

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Mục linh hoạt

<div class="d-flex align-content-end flex-wrap">...</div>

Mục linh hoạt

<div class="d-flex align-content-center flex-wrap">...</div>

Mục linh hoạt

<div class="d-flex align-content-between flex-wrap">...</div>

Mục linh hoạt

<div class="d-flex align-content-around flex-wrap">...</div>

Mục linh hoạt

<div class="d-flex align-content-stretch flex-wrap">...</div>

Các biến thể đáp ứng cũng tồn tại cho align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Đối tượng phương tiện

Tìm cách sao chép thành phần đối tượng phương tiện từ Bootstrap 4? Tạo lại nó ngay lập tức với một số tiện ích linh hoạt cho phép linh hoạt hơn và tùy chỉnh hơn trước.

Đây là một số nội dung từ một thành phần phương tiện. Bạn có thể thay thế nội dung này bằng bất kỳ nội dung nào và điều chỉnh nó nếu cần.

html

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Và giả sử bạn muốn căn giữa nội dung theo chiều dọc bên cạnh hình ảnh:

Đây là một số nội dung từ một thành phần phương tiện. Bạn có thể thay thế nội dung này bằng bất kỳ nội dung nào và điều chỉnh nó nếu cần.

html

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

API tiện ích

Các tiện ích Flexbox được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),