Bootstrap5 Flex (Flexbox) Layout
Bootstrap5 uses flex classes to control page layout.
Flexbox
The biggest difference between Bootstrap 3 and Bootstrap 4/5 is that Bootstrap 4/5 uses flexbox for layout, instead of using floats.
Flexbox is a new layout mode in CSS3, more suitable for responsive design. If you don't understand flex yet, you can read ourCSS3 Flexible Box (Flex Box)Tutorial
Note: IE9 and below do not support flexbox, so if you need to support IE8-9, please useBootstrap 3。
The following example uses the d-flex class to create a flexbox container and sets three flex items:
Example
Try it »
You can use the d-inline-flex class to create a flexbox container that displays on the same line:
Example
Try it »
Horizontal
.flex-rowYou can set the flex items to display horizontally, which is the default.
Use.flex-row-reverseclass is used to set right-aligned display, i.e., with.flex-rowthe opposite direction.
Example
Try it »
Vertical
.flex-columnclass is used to set the flex items to display vertically,.flex-column-reverseused to reverse the items:
Example
Try it »
Justify Content
.justify-content-*class is used to change the arrangement of the flex items,*The allowed values are:start (default), end, center, between or around:
Example
Try it »
Equal Width
The .flex-fill class forces each flex item to have the same width:
Example
Try it »
Grow
.flex-grow-1 is used to set the element to use the remaining space. In the following example, the first two elements only take up the space they need, and the last one takes the remaining space. :
Example
Try it »
Tip:Use.flex-shrink-1to set the shrink rules for the elements.
Order
.orderclass can set the order of the flex items, from.order-1to.order-12, the lower the number, the higher the weight (.order-1is placed.order-2before) :
Example
Try it »
Margin
.ms-autoclass can set the right margin of the child element toauto, i.e.,margin-right: auto!important;，.me-autoclass can set the left margin of the child element toauto, i.e.,margin-left: auto!important;:
Example
Try it »
Wrap
You can use the following three classes to wrap the items in a flex container: .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse. Set the flex container to be single-line or multi-line.
Example
Try it »
Align Content
We can use `.align-content-*` to control how child elements are stacked vertically. The values include: `.align-content-start` (default), `.align-content-end`, `.align-content-center`, `.align-content-between`, `.align-content-around`, and `.align-content-stretch`.
These classes are ineffective when there is only one row of flex items.
Example
Try it »
Align Items
To align child elements in a single row, you can use.align-items-*classes to control it. The values include:`.align-items-start`, `.align-items-end`, `.align-items-center`, `.align-items-baseline`, and `.align-items-stretch` (default)。
Example
Try it »
Align Self
To align a specific child element, you can use the `.align-self-*` classes to control it. The values include: `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, and `.align-self-stretch` (default).
Example
Try it »
Responsive Flex Classes
We can set flex classes according to different devices to achieve a responsive page layout. The `*` in the table below can be `sm`, `md`, `lg`, or `xl`, corresponding to small devices, medium devices, large devices, and extra-large devices.| Class | Example | Implementation |
|---|---|---|
| Flex containers | ||
.d-*-flex |
Create flexbox containers according to different screen devices | Try it |
.d-*-inline-flex |
Create inline flexbox containers according to different screen devices | Try it |
| Direction | ||
.flex-*-row |
Display flex items horizontally according to different screen devices | Try it |
.flex-*-row-reverse |
Display flex items horizontally and right-aligned according to different screen devices | Try it |
.flex-*-column |
Display flex items vertically according to different screen devices | Try it |
.flex-*-column-reverse |
Display flex items vertically in reverse order according to different screen devices | Try it |
| Justify Content | ||
.justify-content-*-start |
Display flex items at the start position according to different screen devices (left-aligned) | Try it |
.justify-content-*-end |
Display flex items at the end according to different screen devices (right-aligned) | Try it |
.justify-content-*-center |
Center flex items in the flex container according to different screen devices | Try it |
.justify-content-*-between |
Use "between" to display flex items according to different screen devices | Try it |
.justify-content-*-around |
Use "around" to display flex items according to different screen devices | Try it |
| Equal Width | ||
.flex-*-fill |
Force equal width according to different screen devices | Try it |
| Grow | ||
.flex-*-grow-0 |
Do not allow grow according to different screen devices | |
.flex-*-grow-1 |
Allow grow according to different screen devices | |
| Shrink | ||
.flex-*-shrink-0 |
Do not allow shrink according to different screen devices | |
.flex-*-shrink-1 |
Allow shrink according to different screen devices | |
| Wrap | ||
.flex-*-nowrap |
Do not wrap flex items according to different screen devices | Try it |
.flex-*-wrap |
Wrap flex items according to different screen devices | Try it |
.flex-*-wrap-reverse |
Reverse wrap flex items according to different screen devices | Try it |
| Align Content | ||
.align-content-*-start |
Stack flex items at the start position according to different screen devices | Try it |
.align-content-*-end |
Stack flex items at the end position according to different screen devices | Try it |
.align-content-*-center |
Stack flex items at the center position according to different screen devices | Try it |
.align-content-*-around |
Stack flex items using "around" according to different screen devices | Try it |
.align-content-*-stretch |
Stack flex items by stretching them according to different screen devices | Try it |
| Sorting | ||
.order-*-0-12 |
Modify sorting on small screen sizes | Try it |
| Element alignment | ||
.align-items-*-start |
Depending on the screen device, display elements in the same row at the start. | Try it |
.align-items-*-end |
Depending on the screen device, display elements in the same row at the end. | Try it |
.align-items-*-center |
Depending on the screen device, display elements in the same row at the center. | Try it |
.align-items-*-baseline |
Depending on the screen device, display elements in the same row at the baseline. | Try it |
.align-items-*-stretch |
Depending on the screen device, stretch elements' height and display them in the same row. | Try it |
| Alignment of a single child element | ||
.align-self-*-start |
Depending on the screen device, display a single child element at the start. | Try it |
.align-self-*-end |
Depending on the screen device, display a single child element at the end. | Try it |
.align-self-*-center |
Depending on the screen device, display a single child element at the center. | Try it |
.align-self-*-baseline |
Depending on the screen device, display a single child element at the baseline. | Try it |
.align-self-*-stretch |
Depending on the screen device, stretch a single child element. | Try it |