Layout Model - jellyfish-tom/TIL GitHub Wiki

React Native uses layout model called flexbox.

It allows elements to align and distribute space within a container. With Flexbox when Using flexible widths and heights, all the inside the main container can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

Property	Values	Description
flexDirection	‘column’,'row'	Used to specify if elements will be aligned vertically or horizontally
justifyContent	‘center’,'flex-start','flex-end','space-around','space-between'	Used to determine how should elements be distributed inside the container
alignItems	‘center’,'flex-start','flex-end','stretched'	Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection)