Bootstrap 5 Flex
- Trang trước Công cụ thực tế BS5
- Trang tiếp theo Form BS5
Khung đàn hồi
Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 & 5 là Bootstrap 5 hiện đang sử dụng flexbox thay vì nổi để xử lý布局.
mô-đun khung hộp đàn hồi, có thể thiết kế cấu trúc布局 phản hồi đàn hồi dễ dàng hơn mà không cần sử dụng nổi hoặc vị trí.
Nếu bạn không quen thuộc với flex, bạn có thể trong của chúng tôi Hướng dẫn CSS Flexbox học tập.
Ghi chú:IE9 và các phiên bản trước không hỗ trợ Flexbox.
Ghi chú:Nếu bạn cần hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản Bootstrap ổn định nhất, đội ngũ vẫn hỗ trợ nó để sửa lỗi quan trọng và thay đổi tài liệu. Tuy nhiên, sẽ không thêm bất kỳ tính năng mới nào vào đó.
Thực tế
Nếu bạn muốn tạo khối flexbox và chuyển các phần tử con trực tiếp thành phần flex, hãy sử dụng d-flex Loại lớp：
<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div>
Thực tế
Nếu bạn muốn tạo khối flexbox trong dòng, hãy sử dụng d-inline-flex Loại lớp：
<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div>
Hướng ngang
xin sử dụng .flex-row Hiển thị mục elastic theo hướng ngang (ngang hàng), đây là thiết lập mặc định.
Lưu ý:sử dụng .flex-row-reverse Có thể canh phải theo hướng ngang:
Thực tế
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div>
Hướng thẳng đứng
xin sử dụng .flex-column Hiển thị mục flex theo hướng thẳng đứng (堆叠 lên nhau), hoặc sử dụng .flex-column-reverse Đảo ngược hướng thẳng đứng:
Thực tế
<div class="d-flex flex-column"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div>
Đặt nội dung
sử dụng .justify-content-* Loại lớp có thể thay đổi cách sắp xếp mục elastic. Các lớp hợp lệ là:：
start(Mặc định)endcenterbetweenaround
Thực 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>
Độ rộng bằng nhau
sử dụng trên mục 弹 tính .flex-fill Có thể buộc chúng có độ rộng bằng nhau:
Thực tế
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Mục elastic 1</div> <div class="p-2 bg-warning flex-fill">Mục elastic 2</div> <div class="p-2 bg-primary flex-fill">Mục elastic 3</div> </div>
Mở rộng
sử dụng trên mục 弹 tính .flex-grow-1 Có thể chiếm không gian dư. Trong ví dụ sau, hai mục flex đầu tiên chiếm không gian cần thiết, trong khi mục cuối cùng chiếm không gian còn lại có sẵn:
Thực tế
<div class="d-flex"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary flex-grow-1">Mục 弹 tính 3</div> </div>
Lưu ý:sử dụng trên mục 弹 tính .flex-shrink-1 cho phép nó co lại khi cần thiết.
Thứ tự
sử dụng .order lớp có thể thay đổi thứ tự visuell của mục 弹 tính cụ thể. Các lớp hợp lệ từ 0 đến 5, trong đó số nhỏ nhất có优先级 cao nhất (order-1 hiển thị trước order-2, v.v.):
Thực tế
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Mục 弹 tính 1</div> <div class="p-2 bg-warning order-2">Mục 弹 tính 2</div> <div class="p-2 bg-primary order-1">Mục 弹 tính 3</div> </div>
khoảng cách bên ngoài tự động
sử dụng .ms-autohoặc sử dụng .me-auto（dời mục về bên trái）cực kỳ dễ dàng để thêm khoảng cách bên ngoài tự động cho các mục 弹 tính:
Thực tế
<div class="d-flex bg-secondary"> <div class="p-2 ms-auto bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 bg-primary">Mục 弹 tính 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Mục 弹 tính 1</div> <div class="p-2 bg-warning">Mục 弹 tính 2</div> <div class="p-2 me-auto bg-primary">Mục 弹 tính 3</div> </div>
Đặt lại dòng
bằng cách .flex-nowrap（mặc định）、.flex-wrap hoặc .flex-wrap-reversenó có thể kiểm soát cách các mục 弹性 được gói gọn trong bộ chứa 弹性.
Thực tế
<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowrap">..</div>
Đặt nội dung
xin sử dụng .align-content-* Loại kiểm soát cách canh hàng dọc của các mục 弹性. Các lớp hợp lệ là:
.align-content-start(Mặc định).align-content-end.align-content-center.điều-chỉnh-nội-dung-giữa.điều-chỉnh-nội-dung-gần.điều-chỉnh-nội-dung-trực
Ghi chú:Những lớp này không có ảnh hưởng đến mục弹性 đơn dòng.
xin nhấn nút bên dưới để xem sự khác biệt giữa năm lớp này: thông qua việc thay đổi cách đối齐 thẳng đứng của mục弹性 trong khung ví dụ.
Thực tế
<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>
Đặt các mục
xin sử dụng .điều-chỉnh-chính-* lớp điều khiểndòng đơncách đối齐 thẳng đứng của mục弹性. Các lớp hợp lệ là:
.điều-chỉnh-chính-bắt-dầu.điều-chỉnh-chính-cuối.điều-chỉnh-chính-trung-tâm.điều-chỉnh-chính-dưới.điều-chỉnh-chính-trực(Mặc định)
xin nhấn nút bên dưới để xem sự khác biệt giữa năm lớp này:
Thực 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>
đối齐 tự nhiên
xin sử dụng .điều-chỉnh-chính-* lớp điều khiểnđịnh nghĩa mục弹性cách đối齐 thẳng đứng. Các lớp hợp lệ là:
.điều-chỉnh-chính-bắt-dầu.điều-chỉnh-chính-cuối.điều-chỉnh-chính-trung-tâm.điều-chỉnh-chính-dưới.điều-chỉnh-chính-trực(Mặc định)
Nhấp vào nút dưới đây để xem sự khác biệt giữa năm lớp này:
Thực tế
<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Mục Flex 1</div> <div class="p-2 border align-self-start">Mục Flex 2</div> <div class="p-2 border">Mục Flex 3</div> </div>
Lớp Flex phản hồi
Tất cả các lớp elastic đều có các lớp phản hồi bổ sung, giúp dễ dàng thiết lập lớp flex cụ thể trên kích thước màn hình cụ thể.
* có thể được thay thế bằng sm, md, lg, xl hoặc xxl, tương ứng với màn hình nhỏ, trung, lớn, rất lớn và rất rất lớn.
Tìm kiếm lớp elastic cụ thể...
| Lớp | Mô tả | Ví dụ |
|---|---|---|
| Khay elastic | ||
.d-*-flex |
Tạo khay flexbox cho các màn hình khác nhau. | Thử nghiệm |
.d-*-inline-flex |
Tạo khay flexbox trong hàng cho các màn hình khác nhau. | Thử nghiệm |
| Hướng | ||
.flex-*-row |
Hiển thị các mục elastic ngang trên các màn hình khác nhau. | Thử nghiệm |
.flex-*-row-reverse |
Hiển thị các mục elastic ngang và phải trên các màn hình khác nhau. | Thử nghiệm |
.flex-*-column |
Hiển thị các mục elastic thẳng đứng trên các màn hình khác nhau. | Thử nghiệm |
.flex-*-column-reverse |
Hiển thị các mục elastic thẳng đứng theo thứ tự ngược lại trên các màn hình khác nhau. | Thử nghiệm |
| Nội dung theo hàng | ||
.justify-content-*-start |
Hiển thị các mục elastic từ đầu (định dạng trái) trên các màn hình khác nhau. | Thử nghiệm |
.justify-content-*-end |
Hiển thị các mục elastic ở cuối (định dạng phải) trên các màn hình khác nhau. | Thử nghiệm |
.justify-content-*-center |
Hiển thị các mục elastic ở giữa của khay elastic trên các màn hình khác nhau. | Thử nghiệm |
.justify-content-*-between |
Hiển thị các mục elastic bằng nhau trên các màn hình khác nhau. | Thử nghiệm |
.justify-content-*-around |
Hiển thị các mục elastic xung quanh trên các màn hình khác nhau. | Thử nghiệm |
| Fill / Độ rộng bằng nhau | ||
.flex-*-fill |
Buộc các mục elastic có độ co giãn bằng nhau trên các màn hình khác nhau. | Thử nghiệm |
| Mở rộng | ||
.flex-*-grow-0 |
Đừng để các mục mở rộng trên các màn hình khác nhau. | |
.flex-*-grow-1 |
Làm cho các mục mở rộng trên các màn hình khác nhau. | |
| Giảm nhỏ | ||
.flex-*-shrink-0 |
Đừng giảm các mục trên các màn hình khác nhau. | |
.flex-*-shrink-1 |
Giảm các mục trên các màn hình khác nhau. | |
| Thứ tự | ||
.order-*-0-12 |
Thay đổi thứ tự từ 0 đến 12 trên màn hình nhỏ. | Thử nghiệm |
| Đặt lại dòng | ||
.flex-*-nowrap |
Đừng đặt lại dòng của các mục trên các màn hình khác nhau. | Thử nghiệm |
.flex-*-wrap |
Đặt lại dòng của các mục trên các màn hình khác nhau. | Thử nghiệm |
.flex-*-wrap-reverse |
Ngược lại dòng换行 của các mục trên các màn hình khác nhau. | Thử nghiệm |
| Đặt nội dung | ||
.align-content-*-start |
Đặt các mục từ đầu trên các màn hình khác nhau. | Thử nghiệm |
.align-content-*-end |
Đặt các mục theo cuối cùng trên các màn hình khác nhau. | Thử nghiệm |
.align-content-*-center |
Đặt các mục theo trung tâm trên các màn hình khác nhau. | Thử nghiệm |
.align-content-*-around |
Đặt các mục xung quanh các màn hình khác nhau. | Thử nghiệm |
.align-content-*-stretch |
Giãn các mục trên các màn hình khác nhau. | Thử nghiệm |
| Đặt các mục | ||
.align-items-*-start |
Đặt các mục đơn dòng từ đầu trên các màn hình khác nhau. | Thử nghiệm |
.align-items-*-end |
Đặt các mục đơn dòng theo cuối cùng trên các màn hình khác nhau. | Thử nghiệm |
.align-items-*-center |
Đặt các mục đơn dòng theo trung tâm trên các màn hình khác nhau. | Thử nghiệm |
.align-items-*-baseline |
Đặt các mục đơn dòng theo cơ sở trên các màn hình khác nhau. | Thử nghiệm |
.align-items-*-stretch |
Giãn các mục đơn dòng trên các màn hình khác nhau. | Thử nghiệm |
| Đặt tự động | ||
.align-self-*-start |
Đặt các mục弹性 từ đầu trên các màn hình khác nhau. | Thử nghiệm |
.align-self-*-end |
Đặt các mục弹性 theo cuối cùng trên các màn hình khác nhau. | Thử nghiệm |
.align-self-*-center |
Đặt các mục弹性 theo trung tâm trên các màn hình khác nhau. | Thử nghiệm |
.align-self-*-baseline |
Đặt các mục弹性 theo cơ sở trên các màn hình khác nhau. | Thử nghiệm |
.align-self-*-stretch |
Giãn các mục弹性在不同屏幕上。 | Thử nghiệm |
- Trang trước Công cụ thực tế BS5
- Trang tiếp theo Form BS5
