# flex-flow property

The `flex-flow` property is a shorthand for `flex-direction` and `flex-wrap`. Default value: `row nowrap`. It applies to the parent element for flex blocks.

## Syntax

`selector { flex-flow: main_axe_direction multi-line; }`

The order doesn't matter.

## Example

In this example, the blocks do not fit into their container and will be lined up in several lines:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: flex; flex-flow: row wrap; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Example

Let's change a direction of the main axis (column instead of row):

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { flex-flow: column wrap; justify-content: space-between; display: flex; height: 200px; width: 330px; margin: auto; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## See also

- the `flex-direction` property
  that specifies a direction of the flex block axes
- the `justify-content` property
  that sets an alignment along the cross axis
- the `align-items` property
  that sets an alignment along the cross axis
- the `flex-wrap` property
  that sets the multi-line nature of flex blocks
- the `order` property
  that specifies an order of flex blocks
- the `align-self` property
  that specifies an alignment of a single block
- the `flex-basis` property
  that sets a size of a certain flex block
- the `flex-grow` property
  that sets a greediness of flex blocks
- the `flex-shrink` property
  that sets a shrink of flex blocks
- the `flex` property
  a shorthand for flex-grow, flex-shrink and flex-basis

← →
↑
en ru