Bootstrap 4 Flex
Bootstrap 4 Flex
Sử dụng các lớp flex để kiểm soát bố cục của các thành phần Bootstrap 4.
Flexbox
Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 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 phao 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 trước đó.
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à nó vẫn được nhóm hỗ trợ cho các bản sửa lỗi và thay đổi tài liệu quan trọng. 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 vùng chứa flexbox và chuyển đổi trực tiếp con thành các mục flex, hãy sử dụng d-flexlớp:
Thí dụ
Thí 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>
Để tạo một vùng chứa flexbox nội tuyến, hãy sử dụng d-inline-flexlớp:
Thí dụ
Thí 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ướng ngang
Sử dụng .flex-rowđể hiển thị các mục linh hoạt 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:
Thí dụ
Thí 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ướng dọc
Sử dụng .flex-columnđể hiển thị các mục uốn theo chiều dọc (chồng lên nhau) hoặc .flex-column-reverse
để đảo ngược hướng dọc:
Thí dụ
Thí 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>
Căn đều nội dung
Sử dụng các .justify-content-*lớp để thay đổi sự liên kết của các mục linh hoạt. Các lớp hợp lệ là start(mặc định ) end, hoặc center:betweenaround
Thí dụ
Thí 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>
Độ rộng lấp đầy / Bằng nhau
Sử dụng .flex-filltrên các mục uốn cong để buộc chúng thành các chiều rộng bằng nhau:
Thí dụ
Thí 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>
Lớn lên
Sử dụng .flex-grow-1trên một mục linh hoạt để chiếm phần còn lại của không gian. 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 của chúng, trong khi mục cuối cùng chiếm phần còn lại của không gian khả dụng:
Thí dụ
Thí 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>
Mẹo: Sử dụng .flex-shrink-1trên một mục uốn cong để làm cho nó co lại nếu cần.
Gọi món
Thay đổi thứ tự trực quan của (các) mục linh hoạt cụ thể với các .orderlớp. Các lớp hợp lệ là từ 0 đến 12, 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.):
Thí dụ
Thí 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>
Lề tự động
Dễ dàng thêm lề tự động để linh hoạt các mục bằng .mr-auto(đẩy các mục sang phải) hoặc bằng cách sử dụng .ml-auto(đẩy các mục sang trái):
Thí dụ
Thí dụ
<div class="d-flex
bg-secondary">
<div class="p-2 mr-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 ml-auto bg-primary">Flex item
3</div>
</div>
Bọc
Kiểm soát cách các mục linh hoạt bọc trong một thùng chứa linh hoạt với .flex-nowrap(mặc định) .flex-wraphoặc .flex-wrap-reverse.
Nhấp vào các nút bên dưới để xem sự khác biệt giữa ba lớp, bằng cách thay đổi cách gói các mục flex trong hộp ví dụ:
Thí dụ
Thí dụ
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
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 được tập hợp.align-content-* với các
lớp. Các lớp hợp lệ là .align-content-start(mặc định ) .align-content-end,, và ..align-content-center.align-content-between.align-content-around.align-content-stretch
Lưu ý: Các lớp này không có tác dụng đối với các hàng đơn lẻ của mục linh hoạt.
Thí dụ
Thí 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>
Căn chỉnh các mặt hàng
Kiểm soát căn chỉnh theo chiều dọc của các hàng linh hoạt đơn lẻ với các .align-items-*
lớp. Các lớp hợp lệ là ,, và .align-items-start( mặc
định)..align-items-end.align-items-center.align-items-baseline.align-items-stretch
Nhấp vào các nút bên dưới để xem sự khác biệt giữa năm lớp:
Thí dụ
Thí 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>
Căn chỉnh bản thân
Kiểm soát căn chỉnh theo chiều dọc của một mục linh hoạt cụ thể với các .align-self-*
lớp. Các lớp hợp lệ là ,, và .align-self-start( mặc
định)..align-self-end.align-self-center.align-self-baseline.align-self-stretch
Nhấp vào các nút bên dưới để xem sự khác biệt giữa năm lớp:
Thí dụ
Thí 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>
Các lớp linh hoạt đáp ứng
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| 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 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |