## Flex

###### Enable Flex

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

I'm a flexbox container!

###### Direction

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

###### Justify Content

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

###### Align Items

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

###### Align Self

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

###### Fill

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

###### Grow and Shrink

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

Flex item
Flex item
Third flex item

###### Auto Margins

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

Flex item
Flex item
Third flex item

###### Order

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

First Item
Second Item
Third Item

###### Project Status

1

###### Project Planning

100% Completed
1

###### Project Desiging

100% Completed
4/6

###### Project Development

76% Progress
1/5

###### Project Testing

Waiting