# Flex Shorthand - Content


This article shows the basic shorthand for flex property.

<!--more-->

## Here are all the Flex properties.

Flex
- ```flex-grow```
- ```flex-shrink```
- ```flex-basis```

Flex-flow
- ```flex-flow```

> **Side note:** This is the order of your shorthand.

### This is the shorthand.

```css
.flex--parent {
  display: flex;
}

.flex-shorthand-example--child {
  Flex: 1 1 100%;
}
```

```css
.flex-flow-shorthand-example {
  flex-direction: column;
  flex-wrap: wrap;
}