JustifyContent property aligns the flexible container’s items when the items do not use all available space on the main axis. By default, the main axis is a vertical axis in case of React native. Which means justifyContent property aligns child elements of flex parent vertically in React native. We can use this property to layout elements in a flex container. JustifyContent supports the following values: flex-start|flex-end|centre|space-between|space-around|initial|inherit; It also apply some control over the alignment of items when they overflow the line. Let me explain JustifyContent’s values:
- flex-start: this is the default value for justifyContent. It means that flex items will start from the top and evenly distributed vertically.
- Flex-end: this is just the opposite behaviour of flex-start. Elements start rendering from the bottom
- Center: Items will be placed in the middle
- Space-between: elements are evenly distributed along the main axis (vertical axis)
- Space-around: flex items will be evenly distributed with equal space around them
Leave a Reply