# flex property

The `flex` property is shorthand for `flex-basis`, `flex-shrink` and `flex-grow`.

It applies to: a specific flex block.

The order doesn't matter. The second and third parameters (`flex-shrink`, `flex-basis`) are optional.

## Values

See corresponding properties.

Default value: `0` `1` auto.

## Example

Let us have `3` elements. The width of each of them is `200px` and a total of `600px`, which is greater than the width of the parent container, which is `300px`. Let's assign a width of `200px` for the first element, `300px` for the second element, and `100px` for the third element. For all elements, let the value of `flex-basis` be equal to `1`, and `flex-shrink` - `1`, `2`, `3` in accordance with the index number of the element:

`<div class="parent"> <div class="child elem1">1</div> <div class="child elem2">2</div> <div class="child elem2">3</div> </div>` `.parent { display: flex; width: 350px; height: 200px; border: 1px solid red; } .child { width: 200px; height: 50px; border: 1px solid green; } .elem1 { flex: 200px 1 1; } .elem2 { flex: 300px 1 2; } .elem3 { flex: 100px 1 3; }`

:

## 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 `flex-flow` property
  a shorthand for flex-direction and flex-wrap
- 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

← →
↑
en ru