Source

Uốn cong

Nhanh chóng quản lý bố cục, căn chỉnh và định cỡ cá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.

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!
<div class="d-flex p-2">I'm a flexbox container!</div>
Tôi là một container flexbox nội tuyến!
<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-flex.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

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
<div class="d-flex flex-row">
  <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
<div class="d-flex flex-column">
  <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

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ừ start(mặc định của trình duyệt ) end, hoặc .centerbetweenaround

Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
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>

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-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

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
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
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

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
Mục linh hoạt được căn chỉnh
Mục linh hoạt
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
Mục linh hoạt được căn chỉnh
Mục linh hoạt
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

Lề tự động

Flexbox có thể làm một số điều khá tuyệt vời khi bạn kết hợp các căn chỉnh flex với các 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 ( .mr-auto) và đẩy hai mục sang trái ( .ml-auto).

Thật không may, IE10 và IE11 không hỗ trợ chính xác lề tự động trên các mục linh hoạt có giá trị không phải là justify-contentgiá trị mặc định. Xem câu trả lời StackOverflow này để biết thêm chi tiết.

Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-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: columnmargin-top: autohoặc margin-bottom: auto.

Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-items-start flex-column" 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" 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
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex flex-nowrap">
  ...
</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex flex-wrap">
  ...
</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
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

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 (ví dụ 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
<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-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Căn chỉnh nội dung

Sử dụng align-contentcác tiện ích trên thù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
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-content-end flex-wrap">...</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-content-center flex-wrap">...</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-content-between flex-wrap">...</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
<div class="d-flex align-content-around flex-wrap">...</div>
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
Mục linh hoạt
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-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch