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

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”