Khởi động 5 Flex
Flexbox
Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 & 5 là Bootstrap 5 hiện sử dụng flexbox, thay vì float để xử lý bố cục.
Mô-đun bố cục hộp linh hoạt, giúp thiết kế cấu trúc bố cục linh hoạt đáp ứng dễ dàng hơn mà không cần sử dụng float hoặc định vị. Nếu bạn chưa quen với flex, bạn có thể đọc về nó trong Hướng dẫn CSS Flexbox của chúng tôi.
Lưu ý: Flexbox không được hỗ trợ trong IE9 và các phiên bản cũ hơn.
Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu. Tuy nhiên, sẽ không có tính năng mới nào được thêm vào nó.
Để tạo một thùng chứa flexbox và chuyển đổi các phần tử con trực tiếp thành các phần tử flex, hãy sử dụng lớp d-flex :
Ví dụ
Ví dụ
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Hãy tự mình thử » Để tạo một thùng chứa flexbox nội tuyến, hãy sử dụng lớp d-inline-flex :
Ví dụ
Ví dụ
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Hãy tự mình thử »Hướng ngang
Sử dụng .flex-row để hiển thị các mục flex theo chiều ngang (cạnh nhau). Đây là mặc định.
Mẹo: Sử dụng .flex-row-reverse để căn phải theo hướng ngang:
Ví dụ
Ví dụ
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Hãy tự mình thử »Hướng dọc
Sử dụng .flex-column để hiển thị các mục flex theo chiều dọc ( chồng lên nhau) hoặc .flex-column-reverse để đảo ngược hướng dọc:
Ví dụ
Ví dụ
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Hãy tự mình thử » Căn chỉnh nội dung
Sử dụng các lớp .justify-content-* để thay đổi cách căn chỉnh các mục linh hoạt. Các lớp hợp lệ là start (mặc định), end , center , between hoặc around :
Ví dụ
Ví dụ
<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>
Hãy tự mình thử »Điền / Chiều rộng bằng nhau
Sử dụng .flex-fill trên các mục flex để buộc chúng có chiều rộng bằng nhau:
Ví dụ
Ví dụ
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Hãy tự mình thử »Phát triển
Sử dụng .flex-grow-1 trên một mục linh hoạt để chiếm phần không gian còn lại. Trong ví dụ bên dưới, hai mục linh hoạt đầu tiên chiếm không gian cần thiết, trong khi mục cuối cùng chiếm phần không gian còn lại:
Ví dụ
Ví dụ
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Hãy tự mình thử » Mẹo: Sử dụng .flex-shrink-1 trên một mục flex để làm cho nó co lại nếu cần.
Đặt hàng
Thay đổi thứ tự trực quan của (các) mục linh hoạt cụ thể bằng các lớp .order . Các lớp hợp lệ là từ 0 đến 5, trong đó số thấp nhất có mức độ ưu tiên cao nhất (thứ tự-1 được hiển thị trước thứ tự-2, v.v.):
Ví dụ
Ví dụ
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Hãy tự mình thử »Lề tự động
Dễ dàng thêm lề tự động vào các mục linh hoạt bằng .ms-auto (đẩy các mục sang bên phải) hoặc bằng cách sử dụng .me-auto (đẩy các mục sang trái):
Ví dụ
Ví dụ
<div class="d-flex
bg-secondary">
<div class="p-2 ms-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 me-auto bg-primary">Flex item
3</div>
</div>
Hãy tự mình thử »Bọc
Kiểm soát cách gói các mục linh hoạt trong một thùng chứa linh hoạt bằng .flex-nowrap (mặc định), .flex-wrap hoặc .flex-wrap-reverse .
Nhấp vào các nút bên dưới để thấy sự khác biệt giữa ba lớp, bằng cách thay đổi cách gói các mục linh hoạt trong hộp ví dụ:
Ví dụ
Ví dụ
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Hãy tự mình thử »Căn chỉnh nội dung
Kiểm soát việc căn chỉnh theo chiều dọc của các mục linh hoạt đã tập hợp bằng các lớp .align-content-* . Các lớp hợp lệ là .align-content-start (mặc định), .align-content-end , .align-content-center , .align .align-content-between , .align-content-around và .align-content-stretch .
Lưu ý: Các lớp này không có tác dụng đối với một hàng mục linh hoạt.
Ví dụ
Ví dụ
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Hãy tự mình thử »Căn chỉnh các mục
Kiểm soát sự căn chỉnh theo chiều dọc của các hàng mục linh hoạt bằng các lớp .align-items-* . Các lớp hợp lệ là .align-items-start , .align-items-end , .align-items-center , .align-items-baseline và .align-items-stretch (mặc định).
Nhấp vào các nút bên dưới để thấy sự khác biệt giữa năm lớp:
Ví dụ
Ví dụ
<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>
Hãy tự mình thử »Căn chỉnh bản thân
Kiểm soát việc căn chỉnh theo chiều dọc của một mục flex được chỉ định bằng các lớp .align-self-* . Các lớp hợp lệ là .align-self-start , .align-self-end , .align-self-center , .align-self-baseline và .align-self-stretch (mặc định).
Nhấp vào các nút bên dưới để thấy sự khác biệt giữa năm lớp:
Ví dụ
Ví dụ
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start ">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Hãy tự mình thử »Lớp học linh hoạt đáp ứng
Tất cả các lớp flex đều đi kèm với các lớp đáp ứng bổ sung, giúp dễ dàng đặt một lớp flex cụ thể trên một kích thước màn hình cụ thể.
Biểu tượng * có thể được thay thế bằng sm, md, lg, xl hoặc xxl, đại diện cho màn hình nhỏ, trung bình, lớn, xlarge và xxlarge.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | Try it |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | Try it |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | Try it |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | Try it |
.flex-*-column |
Display flex items vertically on different screens | Try it |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | Try it |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | Try it |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | Try it |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | Try it |
.justify-content-*-between |
Display flex items in "between" on different screens | Try it |
.justify-content-*-around |
Display flex items "around" on different screens | Try it |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | Try it |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*- 0-12 |
Change the order from 0 to 5 on small screens | Try it |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | Try it |
.flex-*-wrap |
Wrap items on different screens | Try it |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | Try it |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | Try it |
.align-content-*-end |
Align gathered items at the end on different screens | Try it |
.align-content-*-center |
Align gathered items in the center on different screens | Try it |
.align-content-*-around |
Align gathered items "around" on different screens | Try it |
.align-content-*-stretch |
Stretch gathered items on different screens | Try it |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | Try it |
.align-items-*-end |
Align single rows of items at the end on different screens | Try it |
.align-items-*-center |
Align single rows of items in the center on different screens | Try it |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | Try it |
.align-items-*-stretch |
Stretch single rows of items on different screens | Try it |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | Try it |
.align-self-*-end |
Align a flex item at the end on different screens | Try it |
.align-self-*-center |
Align a flex item in the center on different screens | Try it |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | Try it |
.align-self-*-stretch |
Stretch a flex item on different screens | Try it |
