The **`flex-basis` property** in #key# CSS: Cascade Style Sheets #key# is used to define the initial main size of flexible items. 



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

# 
#  Syntax

---
```css
flex-basis: number|auto|initial|inherit;
```
---

# 
## Property values

- **`number`**:  It is used to define the percentage, or the unit of the length to set the initial length of flexible items. 

- **`auto`**: It is the default value. If there is no specified length then the length depends on the content. 




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

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

##
## Code

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

<div class="outer">

  <div class="box">Box 1</div>
  <div class="box smaller">Box 2 (smaller)</div>
  <div class="box">Box 3</div>
  
</div>

.outer
{
  font: 14px sans-serif;
  background: rgb(74, 218, 187);
  color: white;
  height: 100px;
  border: 2px solid black;
  display: flex;
}
.box 
{
  padding: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}
.smaller 
{
  background: rgb(149, 158, 130);
  flex-shrink: 5;
}

codemirror

In this example, we can see that we have set the value of *flex-basis as 200px.* We can see that the size of the box with the flex-basis value defined is smaller than the size of the other boxes. We can also set the value depending upon the requirements. 

What is the CSS flex-basis property?

Defines the initial main size of flexible items, with values: number, auto, initial, inherit.