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.
Bật các hành vi linh hoạ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 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">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
.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.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">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 bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">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-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ừ (mặc định của start
trình duyệt ) end
,,, hoặc .center
between
around
evenly
<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-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
<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-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
<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-fill
lớ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 vẫn chiếm tất cả không gian chiều ngang có sẵn.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">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-1
phầ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.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">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-1
buộ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
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Các biến thể đáp ứng cũng tồn tại cho flex-grow
và 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
).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">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: column
và margin-top: auto
hoặc margin-bottom: auto
.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">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-wrap
hoặc ngược gói với .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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ố 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 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.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">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-first
và 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-last
order
order: -1
order: 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-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ẻ.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.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.
<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:
<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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),