# flex-basis

## Introduction

Defines the initial size of the `flex` element on the main axis of the `flex` container. It has the same meaning as `width`/`height` in the `flex` container, and has a higher priority than `width`/`height`. The `box-sizing` influence determines how much space is taken up in the main axis.

## Grammar

````css
flex-basis: 10em;

flex-basis: 3px;

flex-basis: 10%;

flex-basis: auto;
````

### Value

- `auto`

Defaults.  Refers to its own `width` and `height` properties.

- `<length>`

Absolute size.

- `<percentage>`

A percentage relative to the size of the parent element.

## Standardized grammar

````css
flex-basis: auto | <length> | <percentage>
````

## Example

```html
<view class="container">
  <view style="flex-basis:auto;background-color:rgba(255,0,200,0.2);flex-grow:1">
    <text>flex-basis:auto</text>
  </view>
  <view style="margin-left:5px;background-color:rgba(0,0,255,0.2);flex-grow:1">
    <text>Item Two</text>
  </view>
  <view style="margin-left:5px;background-color:rgba(0,0,255,0.2);flex-grow:1">
    <text>Item Three</text>
  </view>
</view>
````

## Notes

- This property has no inheritance relationship.