Flex

Quickly manage the layout, alignment, and sizing of grid columns and other elements. For more complex implementations, custom CSS may be necessary. To learn flexbox read a flexbox guide.

To enable flexbox layout use display utilities like .d-flex, .d-inline-flex and their responsive variations.

<div class="d-flex"> I'm a flexbox container! All children inside me will behave in according to flexbox. </div>

Flex container's classes

Direction

Set the direction of flex items in a flex container. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

prop
.flex
[breakpoint]
-sm
-md
-lg
-xl
value
-row
-column
-row-reverse
-column-reverse
result
.flex-row-reverse
Item 1
Item 2
Item 3
Item 4

Wrap

prop
.flex
[breakpoint]
-sm
-md
-lg
-xl
value
-wrap
-nowrap
-wrap-reverse
result
.flex-wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Justify content

prop
.justify-content
[breakpoint]
-sm
-md
-lg
-xl
value
-start
-end
-center
-between
-around
result
.justify-content-between
1
2
3

Align items

prop
.align-items
[breakpoint]
-sm
-md
-lg
-xl
value
-start
-end
-center
-baseline
-stretch
result
.align-items-center
1
2
3

Align content

This property has no effect on single rows of flex items. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

prop
.align-content
[breakpoint]
-sm
-md
-lg
-xl
value
-start
-end
-center
-between
-around
-stretch
result
.align-content-end
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Children's classes

Fill

prop
.flex
[breakpoint]
-sm
-md
-lg
-xl
value
-fill

Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space.

No fill
Equal
Equal
<div class="d-flex"> <div class="p-2 example">No fill</div> <div class="p-2 flex-fill example">Equal</div> <div class="p-2 flex-fill example">Equal</div> </div>

Grow and shrink

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

prop
.flex
[breakpoint]
-sm
-md
-lg
-xl
value
-grow-0
-grow-1
result
.flex-grow-0
1
.flex-grow-0
Lorem

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.

prop
.flex
[breakpoint]
-sm
-md
-lg
-xl
value
-shrink-0
-shrink-1
result
.flex-shrink-0
1
.flex-shrink-0
Lorem ipsum, dolor sit
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ab ipsam sapiente ut, voluptas possimus perferendis ea nesciunt rerum quasi.

Align self

prop
.align-self
[breakpoint]
-sm
-md
-lg
-xl
value
-auto
-start
-end
-center
-baseline
-stretch
result
.align-self-end
1
.align-self-end
3

Order

Change the visual order of specific flex items with order utilities. With this classes you can also change order of grid columns since Setka's grid build with flexbox layout.

prop
.order
[breakpoint]
-sm
-md
-lg
-xl
value
-0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
result
.order-0
1
.order-0
2
3
4
5
6
7
8
9
10
11

Grid