Flex Direction
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
👉
flex
,
direction
,
grow
,
shrink
,
wrap
,
align-items
,
align-self
,
align-content
,
justify-content
,
place-content
,
order
|
Class
|
Properties
|
|---|---|
| flex-row | |
| flex-row-reverse | |
| flex-column | |
| flex-column-reverse |
Row
Use .flex-row to set a horizontal direction (the browser default).
1
2
3
<div class="d-flex flex-row">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Row reversed
Use .flex-row-reverse to start the horizontal direction from the opposite side.
1
2
3
<div class="d-flex flex-row-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Column
Use .flex-column to set a vertical direction.
1
2
3
<div class="d-flex flex-column">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Column reversed
Use .flex-column-reverse to start the vertical direction from the opposite side.
1
2
3
<div class="d-flex flex-column-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Responsive
Responsive variations also exist for each flex-direction value. Use the .flex-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing flex-direction utility.
<div class="flex-column flex-md-row ..."></div>