> For the complete documentation index, see [llms.txt](https://react-native.books.c-k.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-native.books.c-k.dev/styling/flexbox/flexdirection.md).

# flexDirection

Used to determine the item flow direction

![](https://3241674717-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_DfhjIgb2njPA7L1mD%2F-L_QmuFQ4_iecL_td3Bm%2F-L_QniAva-IoVVRTR3N2%2Fimage.png?alt=media\&token=92086bab-2b31-4fac-be7c-433caa127f52)

```jsx
flex=1
// This properties indicates the layout occupation percentage. 
// The occupation of layout is depends on {value}/{num of item in the same level}

// Given
<View style={{flex:1}}></View> // occupy 1/4
<View style={{flex:2}}></View> // occupy 2/4
<View style={{flex:1}}></View> // occupy 1/4

// This property means that 
// “please expand this component to fill the entire area content of the device”
```

![](https://3241674717-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_DfhjIgb2njPA7L1mD%2F-L_QooSPn2mLfFGhtaCq%2F-L_Qopxh8SGCsA--Gzk-%2Fimage.png?alt=media\&token=5d31760e-4626-4180-8bed-b9b0e6bacf85)
