# flexbox 💪 📦 demo

Set container elememt to display: flex;

Flex Item

Flex Item

Flex Item

Flex Item

## Flex Container Properties

Toggle flex container properties with the buttons below

### flex-direction

row

row-reverse

column

column-reverse

### justify-content

flex-start

flex-end

center

space-between

space-around

### align-items

flex-start

flex-end

stretch

center

### flex-direction:

Defines the main axis and direction for flex items to be displayed within the flex container. Default value is 'row'

### justify-content:

Defines how space is allocated between and around flex items along the main axis. Default value is 'flex-start'

### align-items:

Defines how space is allocated between and around flex items along the cross axis. Default value is 'flex-start'

### flex-wrap:

Specifies if flext items are forced into a single line or can be wrapped into multiple lines. Default is 'nowrap'

## Flex Item Properties

### order

Sets the order to display flex items within their container. Items are layed out in ascending order

### flex-grow

Defines the amount of space inside the flex container the item should take up

## MDN Using Flexible Boxes