1. Flex Direction (flexDirection)
| Value |
Description |
| row |
Items are laid out in a line from left to right. |
| row-reverse |
Items are laid out from right to left. |
| column |
Items are laid out from top to bottom. |
| column-reverse |
Items are laid out from bottom to top. |
Example
<View style={{ flexDirection: 'row' }}>
<Text>Item 1</Text>
<Text>Item 2</Text>
</View>
2. 2. Justify Content (justifyContent)
| Value |
Description |
| flex-start |
Items align to the start of the container. |
| flex-end |
Items align to the end of the container. |
| center |
Items align at the center of the container. |
| space-between |
Items display with equal spacing between them. |
| space-around |
Items display with equal spacing around them. |
| space-evenly |
Items display with equal spacing around and between them. |
Example
<View style={{ justifyContent: 'center' }}>
<Text>Centered Item</Text>
</View>
3. Align Items (alignItems)
| Value |
Description |
| flex-start |
Items align to the start of the container. |
| flex-end |
Items align to the end of the container. |
| center |
Items align at the center of the container. |
| stretch |
Items are stretched to fit the container. |
| baseline |
Items align at their baseline. |
Example
<View style={{ alignItems: 'center' }}>
<Text>Centered Item</Text>
</View>
4. Align Self (alignSelf)
| Value |
Description |
| auto |
Inherits its container's alignItems value. |
| flex-start |
Aligns to the start of the container. |
| flex-end |
Aligns to the end of the container. |
| center |
Aligns at the center of the container. |
| stretch |
Stretches to fit the container. |
| baseline |
Aligns at the baseline of the container. |
<View style={{ alignItems: 'flex-start' }}>
<Text style={{ alignSelf: 'center' }}>Centered Item</Text>
</View>
5. Flex Wrap (flexWrap)
| Value |
Description |
| nowrap |
Items will not wrap. |
| wrap |
Items will wrap if they run out of room. |
| wrap-reverse |
Items will wrap in reverse. |
Example
Value Description
nowrap Items will not wrap.
wrap Items will wrap if they run out of room.
wrap-reverse Items will wrap in reverse
6. Flex (flex)
| Value |
Description |
| Number (e.g., 1) |
A shorthand for setting flexGrow, flexShrink, and flexBasis. |
Example
<View style={{ flex: 1 }}>
<Text>Flexible Item</Text>
</View>
7. Flex Grow (flexGrow) & 8. Flex Shrink (flexShrink)
| Value |
Description |
| Number (e.g., 2) |
Defines the ability for an item to grow/shrink if necessary. |
Example
<View style={{ flexGrow: 2 }}>
<Text>Growing Item</Text>
</View>
9. Flex Basis (flexBasis)
| Value |
Description |
| Percentage or Absolute Value |
Defines the default size of an element before the remaining space is distributed. |
Example
<View style={{ flexBasis: '50%' }}>
<Text>Item taking up half the space</Text>
</View>
10. Align Content (alignContent)
| Value |
Description |
| flex-start |
Lines align to the start of the container. |
| flex-end |
Lines align to the end of the container. |
| center |
Lines align at the center of the container. |
| stretch |
Lines are stretched to fit the container. |
| space-between |
Lines display with equal spacing between them. |
| space-around |
Lines display with equal spacing around them. |
Example
<View style={{ alignContent: 'center' }}>
<Text>Centered Content</Text>
</View>