#ReactNative - how #Flexbox works?

I like how this video explains about Flexbox. Check out the official React Native document too.

Four main props

1) flex: to determine the ratio of this element relative to its siblings within a container

2) flexDirection: to set the flex direction 

3) justifyContent: to decide how to place items within a container along the flex direction / axis
flex-start: place items from the start of the container 
flex-end: place items(not sequence wise) from the end of the container
center: place items in the center of the container
space-between: with the first elem at the beg while the last elem at the end
space-around: evenly split space between all child components

4) alignItems: to decide how to place items within a container along the cross / secondary axis
flex-start: left of the main axis
flex-end: right of the main axis
center: place items in the center
stretch: stretch items along the cross axis to fill in the container


Difference between alignItems and alignContent StackOverflow question
alignContent is for a multiline flex box while alignItems is for a single line flex box.

I find it convenient to set different backgroundColor to the components you are trying to arrange as it will show you how much space each component takes up.

Thank you for reading!