Bootstrap5 Flex (flexible) layout
Bootstrap5 passed flex class to control the layout of the page.
Elastic box (flexbox)
The biggest difference between Bootstrap 3 and Bootstrap 4ram 5 is that Bootstrap 4amp 5 is laid out using elastic boxes instead of floats.
Elastic box is a new layout mode of CSS3, which is more suitable for responsive design. If you don’t know flex, you can read our CSS3 elastic box tutorial.
Note: elastic boxes are not supported in IE9 and below, so if you need to becompatible with IE8-9, please use Bootstrap 3.
The following examples use the d-flex class to create an elastic box container and set up three elastic elements:
Example
<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>
To create an elastic box container displayed on the same line, you can use the d-inline-flex class:
Example
<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>
Horizontal direction
.flex-row can set the horizontal display of elastic elements, which is the default.
Use .flex-row-reverse class is used to set the right-aligned display, that is, with the .flex-row in the opposite direction.
Example
<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>
Vertical direction
.flex-column class is used to set the vertical display of elastic subelements .flex-column-reverse used to flip rotor elements:
Example
<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>
Content arrangement
.justify-content-\*` class is used to modify the arrangement of elastic subelements, \* the allowed values for the number are: start (default), end , center , between or around :
Example
<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>
Equal width
.flex-fill class forces the width of each elastic subelement to be the same:
Example
<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>
Expansion
.flex-grow-1 used to set the child elements to use the remaining space. In the following example, the first two child elements only set the space they need, and the last one gets the remaining space.
Example
<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>
Tip: usin .flex-shrink-1 used to set the contraction rules for child elements.
Sort
.order class can set the sort of elastic child elements from the .order-1 to .order-12 the lower the number, the higher the weight .order-1 line up in .order-2 before):
Example
<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>
Outer margin
.ms-auto class can set the right outer margin of child elements to auto. that is margin-right: auto!important; , .ms-auto class can set the right outer margin of child elements to auto , that is margin-left: auto!important; :
Example
<div class="d-flex mb-3 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 mb-3 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>
Parcel
The following three classes can be used to wrap sub elements in elastic containers: .flex-nowrap (default), .flex-wrap or .flex-wrap- reverse . Set the flex container to be single or multi line.
Example
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
Content alignment
We can use ‘. align content - *’ to control how child elements are stacked vertically, including: .align-content-start (default), .align-content-end , .align-content-center , .align-content-between , .align-content-around and .align-content-stretch .
These classes are not valid in elastic sub-elements with only one row.
Example
<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>
Child element alignment
If you want to set the alignment of child elements in a single row, you can use the class is used to control, and the values included include: .align-items-start , .align-items-baseline , and .align-items-stretch (default) .
Example
<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-around">..</div>
<div class="d-flex align-items-stretch">..</div>
Specify child element alignment
If you want to set the alignment of child elements in a single row, you can use the class is used to control, and the values included include: .align-items-start , .align-items-baseline , and .align-items-stretch (default) .
Example
<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>
Responsive type flex class
We can set up according to different devices. flex class to achieve page responsive layout. The values of* in the following table can be: sm,md, lg or xl, corresponding to small devices, medium devices, large devices, super large devices.
Class |
Example |
Realize |
|---|---|---|
Elastic container |
||
|
Create elastic box containers according to different screen devices |
|
|
Create an inline elastic box container according to different screen devices |
|
Direction |
||
|
Display elastic child elements horizontally according to different screen devices |
|
|
Display elastic sub-elements horizontally according to different screen devices and align them to the right |
|
|
Display elastic child elements vertically according to different screen devices |
|
|
Elastic sub-elements are displayed vertically according to different screen devices, and in the opposite direction |
|
Content alignment |
||
|
Display elastic child elements at the start position according to different screen devices (left alignment) |
|
|
Display elastic sub-elements at the tail according to different screen devices (right-aligned) |
|
|
Center the child elements in the flex container according to different screen devices |
|
|
Use “between” to display elastic child elements according to different screen devices |
|
|
Use “around” to display elastic child elements according to different screen devices |
|
Equal width |
||
|
Forced equal width according to different screen devices |
|
Expansion |
||
|
Extension is not set for different screen devices |
|
|
Different screen device settings extension |
|
Contraction |
||
|
Different screen devices do not set shrinkage |
|
|
Different screen device settings shrink |
|
Parcel |
||
|
Package elements are not set on different screen devices |
|
|
Different screen devices set package elements |
|
|
Different screen devices reverse package elements |
|
Content arrangement |
||
|
Stack elements at the starting position according to different screen devices |
|
|
Stack elements at the end position according to different screen devices |
|
|
Stack elements in the middle according to different screen devices |
|
|
Use “around” to stack elements depending on the screen device |
|
|
Stack by stretching elements according to different screen devices |
|
Sort |
||
|
Modify the sort on the small screen size |
|
Element alignment |
||
|
Depending on the screen device, let the element appear on the same line in the header. |
|
|
Depending on the screen device, let the elements appear on the same line at the end. |
|
|
Depending on the screen device, let the elements appear on the same line in the middle. |
|
|
Depending on the screen device, make the elements appear on the same line on the baseline. |
|
|
Depending on the screen device, let the element extend the height and display on the same line. |
|
The alignment of a single child element |
||
|
Depending on the screen device, let a single child element be displayed in the header. |
|
|
Depending on the screen device, let a single child element be displayed at the tail |
|
|
Depending on the screen device, let a single child element be displayed in the center position |
|
|
Depending on the screen device, let a single child element be displayed at the baseline position |
|
|
According to different screen devices, extend a single child element |