Use these classes to define the orientation of the main axis (`row` or `column`). By default, flex items will display in a row. Use `.flex-column` to change the direction of the main axis to vertical.
| `.flex-row` | The main axis runs left to right (default). |
| `.flex-row-reverse` | The main axis runs right to left. |
| `.flex-column` | The main axis runs top to bottom. |
#### Example using `.flex-column`
```html live
<divclass="border d-flex flex-column">
<divclass="p-5 border bg-gray-light">Item 1</div>
<divclass="p-5 border bg-gray-light">Item 2</div>
<divclass="p-5 border bg-gray-light">Item 3</div>
</div>
```
#### Example using `.flex-row`
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
Use `.flex-justify-start` to align items to the start line. By default this will be on the left side of the container. If you are using `.flex-column`, the start line will be at the top of the container.
Use `.flex-justify-end` to align items to the end line. By default this will be on the right side of the container. If you are using `.flex-column`, the end line will be at the bottom of the container.
```html live
<divclass="border d-flex flex-justify-end">
<divclass="p-5 border bg-gray-light">1</div>
<divclass="p-5 border bg-gray-light">2</div>
<divclass="p-5 border bg-gray-light">3</div>
</div>
```
#### flex-justify-center
Use `.flex-justify-center` to align items in the middle of the container.
```html live
<divclass="border d-flex flex-justify-center">
<divclass="p-5 border bg-gray-light">1</div>
<divclass="p-5 border bg-gray-light">2</div>
<divclass="p-5 border bg-gray-light">3</div>
</div>
```
#### flex-justify-between
Use `.flex-justify-between` to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
```html live
<divclass="border d-flex flex-justify-between">
<divclass="p-5 border bg-gray-light">1</div>
<divclass="p-5 border bg-gray-light">2</div>
<divclass="p-5 border bg-gray-light">3</div>
</div>
```
#### flex-justify-around
Use `.flex-justify-around` to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
```html live
<divclass="border d-flex flex-justify-around">
<divclass="p-5 border bg-gray-light">1</div>
<divclass="p-5 border bg-gray-light">2</div>
<divclass="p-5 border bg-gray-light">3</div>
</div>
```
## Align items
Use these classes to align items on the **cross axis**.
The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use [flex-column](#flex-direction) to make the main axis run vertically, your items will be aligned horizontally.
#### CSS
```css
.flex-items-start { align-items: flex-start; }
.flex-items-end { align-items: flex-end; }
.flex-items-center { align-items: center; }
.flex-items-baseline { align-items: baseline; }
.flex-items-stretch { align-items: stretch; }
```
#### Classes
| Class | Behavior |
| --- | --- |
| `.flex-items-start` | Align items to the start of the cross axis |
| `.flex-items-end` | Align items to the end of the cross axis |
| `.flex-items-center` | Align items to the center of the cross axis |
| `.flex-items-baseline` | Align items along their baselines |
| `.flex-items-stretch` | Stretch items from start of cross axis to end of cross axis |
When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.
Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any `align-items` property applied to the flex container.
#### CSS
```css
.flex-self-auto { align-self: auto; }
.flex-self-start { align-self: flex-start; }
.flex-self-end { align-self: flex-end; }
.flex-self-center { align-self: center; }
.flex-self-baseline { align-self: baseline; }
.flex-self-stretch { align-self: stretch; }
```
#### Classes
| Class | Description |
| --- | --- |
| `.flex-self-auto` | Inherit alignment from parent |
| `.flex-self-start` | Align to the start of the cross axis |
| `.flex-self-end` | Align to the end of the cross axis |
| `.flex-self-center` | Align to center of cross axis |
| `.flex-self-baseline` | Align baseline to the start of the cross axis |
| `.flex-self-stretch` | Stretch item from start of cross axis to end of cross axis. |
Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
#### CSS
```css
.flex-order-1 { order: 1; }
.flex-order-2 { order: 2; }
.flex-order-none { order: inherit; }
```
#### Classes
| Class | Description |
| --- | --- |
| `.flex-order-1` | Set order to be 1 |
| `.flex-order-2` | Set order to be 2 |
| `.flex-order-none` | Remove order (typically used with responsive variants) |
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
<divclass="ml-md-3 d-flex flex-justify-center">
<%= octicon "mark-github", :height => '32' %>
</div>
</div>
```
## Flexbox bugs
This section lists flexbox bugs that affect browsers we currently support (**citation needed**).
**1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
