The **`flex` property** in #key# CSS: Cascade Style Sheets #key# is used to set the flexible length on the flexible items. 

It is a shorthand property of the following:
- **`flex-basis`**
- **`flex-grow`**
- **`flex-shrink`**

> There is no effect of this property on non-flexible items. 
# 
#  Syntax

---
```css
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
```
---
# 
## Property values

- **`none`**:  It is the same as the 0 0 auto. It doesn't have any effect on the item. 

- **`auto`**: It is the same as the 1 1 auto.

- **`flex-grow`**: It is used to specify that how much the item will grow when it is compared with the other flexible items.


- **`flex-shrink`**: It is used to specify that how much the item will shrink when it is compared with the other flexible items.

- **`flex-basis`**: If we want to set the length of the flexible items then it is used. Negative values are not allowed. 



- **`initial`**: sets the value to its default value.

- **`inherit`**: inherits the property from its parent value.
##
## Implementation



The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `flex` property is as follows:

<div class="outer-container">
  <div class="box">Box</div>
  <div class="box larger">Larger Box</div>
</div>

.outer-container 
{
  font: 16px sans-serif;
  background: rgb(133, 124, 77);
  color: white;
  height: 100px;
  display: flex;
}
.box 
{
  padding: 10px;
  flex: 1 0 auto;
}
.larger 
{
  background: rgb(42, 109, 62);
  flex: 3 0 auto;
}

codemirror

In this example, we can see that we can set the `flex` property of the smaller box as `1 0 auto` and the larger box as `3 0 auto`. 

Therefore, we can see that the sizes of both boxes are different depending upon the different values provided in the flex property.

What is the CSS flex property?

The flex property in CSS sets the flexible length for items, using flex-grow, flex-shrink, and flex-basis.