# flex-basis property

The `flex-basis` property specifies a size of a specific flex block before other flex properties are applied to it. In general, the property specifies the size of an element along a main axis. This means that if the main axis is horizontal, this property will set the width of the elements, and if it is vertical, then the height.

It applies to a specific flex block.

This property is a part of the shorthand `flex` property.

## Syntax

`selector { flex-basis: any CSS units (and percentage) | auto; }`

Default value: `auto`.

## Example

Let our main axis be horizontal, and `flex-basis` have a value of `50px`. In this case, the width of the elements will be `50px`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>` `.parent { display: flex; flex-direction: row; /* axis is horizontal */ width: 300px; height: 300px; border: 1px solid red; } .child { flex-basis: 50px; /* element size */ border: 1px solid green; }`

:

## Example

Let's now flip the axis without changing the `flex-basis` property value. In this case, the height of the elements will be `50px`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>` `.parent { display: flex; flex-direction: column; /* axis is vertical */ width: 300px; height: 300px; border: 1px solid red; } .child { flex-basis: 50px; border: 1px solid green; }`

:

## 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-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