> 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.md).
# Flexbox
Flexbox is a system of positioning elements within the container. Developer can use flexbox to tell a react native how to position the elements within the the overall view tag. In default, react native will put the elements to the top left of its parent.
For example, if you want to centre the content, you may need 2 properties.
* justifyContent
* Used to move the element in vertical direction
* Properties Setting
* flex-end: push elements down to the very bottom
* center: center middle
* flex-start: default, top
* alignItems
* Used to move the element in horizontal direction
* Properties Setting
* flex-start: default, start of line
* center: center of line
* flex-end: end of line
Flexbox is also used to layout multiple items within the container.
For example, given we target to build the layout like this,
But by default, react-native will look like this,
### flexDirection
Used to determine the item flow direction
```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
// occupy 1/4
// occupy 2/4
// occupy 1/4
// This property means that “please expand this component to fill the entire area content of the device”
```