Bootstrap4 uses flex classes to control the page layout.
* * *
## Flexbox
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 uses flexbox for layout instead of floats.
Flexbox is a new layout mode in CSS3, more suitable for responsive design. If you don't know flex yet, you can read our (#) tutorial.
> Note: IE9 and below don't support flexbox, so if you need IE8-9 compatibility, please use (#).
The following example uses the d-flex class to create a flex container and sets three flex items:
## Example
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
To create a flex container that displays on the same line, you can use the d-inline-flex class:
## Example
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
* * *
## Horizontal Direction
.flex-row can set flex items to display horizontally, which is the default.
Use .flex-row-reverse class to set right-aligned display, which is the opposite direction of .flex-row.
## Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
* * *
## Vertical Direction
.flex-column class is used to set flex items to display vertically, .flex-column-reverse is used to flip the items:
## Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
* * *
## Content Alignment
.justify-content-* class is used to modify the arrangement of flex items. Allowed values for * are: **start (default), end, center, between or around**:
## Example
...
...
...
...
...
[Try it »](#)
* * *
## Equal Width
.flex-fill class forces each flex item to have the same width:
## Example
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
* * *
## Grow
.flex-grow-1 is used to set the item to use the remaining space. In the following example, the first two items only take the space they need, and the last one gets the remaining space.:
## Example
Flex item 1
Flex item 2
Flex item 3
[Try it »](#)
**Tip:** Use .flex-shrink-1 to set the shrink rule for items.
* * *
## Order
.order class can set the order of flex
YouTip