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.
Áp dụng display
cá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.
<div class="d-flex p-2">I'm a flexbox container!</div>
<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
và .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
Đặ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.
<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.
<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
Sử dụng justify-content
cá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 .center
between
around
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
Sử dụng align-items
cá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 ( end
mặc center
định của trình duyệt).baseline
stretch
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
Sử dụng align-self
cá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
,,, start
hoặc ( mặc định của trình duyệt).end
center
baseline
stretch
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
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-content
giá trị mặc định. Xem câu trả lời StackOverflow này để biết thêm chi tiế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>
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: column
và margin-top: auto
hoặc margin-bottom: auto
.
<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>
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-wrap
hoặc ngược gói với .flex-wrap-reverse
.
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
Thay đổi thứ tự trực quan của các mục linh hoạt cụ thể với một số order
tiệ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 order
nhậ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.
<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
Sử dụng align-content
cá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 start
trì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.center
between
around
stretch
flex-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ẻ.
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