Flexbox
Flexbox utilities for creating flexible layouts. Use .flex to create a flex container, then combine with direction, alignment, and sizing utilities.
Flex Container
.flex
Item 1
Item 2
Item 3
.inline-flex
Item 1
Item 2
Item 3
Direction
.flex-row
1
2
3
.flex-row-reverse
1
2
3
.flex-col
1
2
3
.flex-col-reverse
1
2
3
Wrap
.flex-wrap
Item 1
Item 2
Item 3
Item 4
.flex-nowrap
Item 1
Item 2
Item 3
Justify Content
.justify-start
1
2
3
.justify-center
1
2
3
.justify-end
1
2
3
.justify-between
1
2
3
.justify-around
1
2
3
.justify-evenly
1
2
3
Align Items
.items-start
1
2
3
.items-center
1
2
3
.items-end
1
2
3
.items-stretch
1
2
3
.items-baseline
Small
Large
Medium
Align Self
Override align-items on individual flex items:
.self-start, .self-center, .self-end, .self-stretch
Normal
End
Center
Flex Sizing
.flex-1 (flex: 1 1 0%)
Grows and shrinks equally
Grows and shrinks equally
.flex-auto (flex: 1 1 auto)
Grows based on content
Shorter
.flex-initial (flex: 0 1 auto)
Shrinks but doesn't grow
Takes remaining space
.flex-none (flex: none)
Fixed size
Takes remaining space
Grow and Shrink
.grow and .grow-0
Grows
Doesn't grow
.shrink and .shrink-0
Can shrink down with long content
Won't shrink
Order
.order-1 and .order-2
First in markup (order-2)
Second in markup (order-1)
Third in markup (no order)