Loader

Apply display utilities to create a flexbox container and transform direct children elements into flex items.

I'm a flexbox container!

Set the direction of flex items in a flex container with direction utilities.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Use align-self utilities on flexbox items to individually change their alignment on the cross axis.

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content.

Flex item with a lot of content
Flex item
Flex item

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

Flex item
Flex item
Third flex item

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.

Flex item
Flex item
Third flex item

Change the visual order of specific flex items with a handful of order utilities.

First Item
Second Item
Third Item
1
Project Planning
100% Completed
1
Project Desiging
100% Completed
4/6
Project Development
76% Progress
1/5
Project Testing
Waiting