Bootstrap4 Flex Layout
Bootstrap4 uses flex classes to control page layout.
Flexible Box (flexbox)
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 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 earlier versions do not support flexbox, so if you need to be compatible with IE8-9, please useBootstrap 3。
The following example uses the d-flex class to create a flexbox container and sets three flex child elements:
Example
Try it Yourself »
To create a flexbox container that displays on the same line, you can use the d-inline-flex class:
Example
Try it Yourself »
Horizontal
.flex-rowYou can set flex child elements to display horizontally; this is the default.
Use.flex-row-reverseclass is used to set right-aligned display, that is, opposite to.flex-rowdirection.
Example
Try it Yourself »
Vertical
.flex-columnThe class is used to set flex child elements to display vertically,.flex-column-reverseused to flip child elements:
Example
Try it Yourself »
Justify Content
.justify-content-*The class is used to modify the arrangement of flex child elements,*The allowed values are:start (default), end, center, between, or around:
Example
Try it Yourself »
Equal Width
The .flex-fill class forces the width of each flex child element to be the same:
Example
Try it Yourself »
Grow
.flex-grow-1 is used to set the child element to use the remaining space. In the following example, the first two child elements only use the space they need, and the last one gets the remaining space. :
Example
Try it Yourself »
Tip:Use.flex-shrink-1used to set the shrink rules for child elements.
Order
.orderThe class can set the order of flex child elements, from.order-1to.order-12, the lower the number, the higher the weight (.order-1ranked.order-2before) :
Example
Try it Yourself »
Margin
.mr-autoThe class can set the right margin of the child element toauto, that is,margin-right: auto!important;，.ml-autoThe class can set the left margin of the child element toauto, that is,margin-left: auto!important;:
Example
Try it Yourself »
Wrap
To wrap child elements in a flex container, you can use the following three classes: .flex-nowrap (default), .flex-wrap, or .flex-wrap-reverse. Set the flex container to be single-line or multi-line.
Example
Try it Yourself »
Align Content
We can use .align-content-* to control how flex items 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 have no effect when there is only one row of flex items.
Example
Try it yourself »
Align Items
To set the alignment of flex items in a single row, use the.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 yourself »
Align Self
To set the alignment of a specified flex item, 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 yourself »
Responsive Flex Classes
We can set flex classes according to different devices to achieve responsive page layouts. The possible values for * in the following table are: sm, md, lg, or xl, corresponding to small devices, medium devices, large devices, and extra-large devices.| Class | Example | Implementation |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Create flexbox containers for different screen devices. | Try it yourself |
.d-*-inline-flex |
Create inline flexbox containers for different screen devices. | Try it yourself |
| Direction | ||
.flex-*-row |
Display flex items in the horizontal direction for different screen devices. | Try it yourself |
.flex-*-row-reverse |
Display flex items horizontally and right-aligned for different screen devices. | Try it yourself |
.flex-*-column |
Display flex items in the vertical direction for different screen devices. | Try it yourself |
.flex-*-column-reverse |
Display flex items in the vertical direction, reversed, for different screen devices. | Try it yourself |
| Order | ||
.order-*-0-12 |
Change the order on small screen sizes. | Try it yourself |
| Align Content | ||
.justify-content-*-start |
Display flex items at the start position (left-aligned) for different screen devices. | Try it yourself |
.justify-content-*-end |
Display flex items at the end position (right-aligned) for different screen devices. | Try it yourself |
.justify-content-*-center |
Center flex items in the flex container for different screen devices. | Try it yourself |
.justify-content-*-between |
Use 'between' to display flex items for different screen devices. | Try it yourself |
.justify-content-*-around |
Use 'around' to display flex items for different screen devices. | Try it yourself |
| Equal Width | ||
.flex-*-fill |
Force equal widths for different screen devices. | Try it yourself |
| Grow | ||
.flex-*-grow-0 |
Do not set grow for different screen devices. | |
.flex-*-grow-1 |
Set grow for different screen devices. | |
| Shrink | ||
.flex-*-shrink-0 |
Do not set shrink for different screen devices. | |
.flex-*-shrink-1 |
Set shrink for different screen devices. | |
| Wrap | ||
.flex-*-nowrap |
Do not wrap elements for different screen devices. | Try it yourself |
.flex-*-wrap |
Wrap elements for different screen devices. | Try it yourself |
.flex-*-wrap-reverse |
Reverse wrapping for different screen devices. | Try it yourself |
| Justify Content | ||
.align-content-*-start |
Stack elements at the start position for different screen devices. | Try it yourself |
.align-content-*-end |
Stack elements at the end position for different screen devices. | Try it yourself |
.align-content-*-center |
Stack elements in the center for different screen devices. | Try it yourself |
.align-content-*-around |
Use 'around' to stack elements for different screen devices. | Try it yourself |
.align-content-*-stretch |
Stack by stretching elements according to different screen devices. | Try it yourself |
| Element Alignment | ||
.align-items-*-start |
Depending on the screen device, display elements in the same line at the start. | Try it yourself |
.align-items-*-end |
Depending on the screen device, display elements in the same line at the end. | Try it yourself |
.align-items-*-center |
Depending on the screen device, display elements in the same line at the center. | Try it yourself |
.align-items-*-baseline |
Depending on the screen device, display elements in the same line at the baseline. | Try it yourself |
.align-items-*-stretch |
Depending on the screen device, stretch elements and display them in the same line. | Try it yourself |
| Single Child Element Alignment | ||
.align-self-*-start |
Depending on the screen device, display a single child element at the start. | Try it yourself |
.align-self-*-end |
Depending on the screen device, display a single child element at the end. | Try it yourself |
.align-self-*-center |
Depending on the screen device, display a single child element at the center. | Try it yourself |
.align-self-*-baseline |
Depending on the screen device, display a single child element at the baseline. | Try it yourself |
.align-self-*-stretch |
Depending on the screen device, stretch a single child element. | Try it yourself |