# 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”
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://react-native.books.c-k.dev/styling/flexbox.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.