Align Items & Justify Content in React Native

Опубликовано: 18 Июль 2021
на канале: JAS ACADAMY

1,505

Justify Content
-----------------------------
justifyContent describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.

1)flex-start(default value): Align children of a container to the start of the container's main axis.

2)flex-end : Align children of a container to the end of the container's main axis.

3) center: Align children of a container in the center of the container's main axis.

4) space-between: Evenly space off children across the container's main axis, distributing the remaining space between the children.

5) space-around: Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

6) space-evenly: Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Align Items
-------------------------------
AlignItems describes how to align children along the cross axis of their container. Align items is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.

1) stretch (default value): Stretch children of a container to match the height of the container's cross axis.

2)flex-start: Align children of a container to the start of the container's cross axis.

3)flex-end: Align children of a container to the end of the container's cross axis.

4)center: Align children of a container in the center of the container's cross axis.

baseline Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.