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>