Flex Shorthand - Content

This article shows the basic shorthand for flex property.

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.

1
2
3
4
5
6
7

.flex--parent {
  display: flex;
}

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

1
2
3
4

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