Gap
Manage spacing between flex items.
Import
src/screens/Component.js
import { flex } from "nativeflowcss";
Properties
| Object | Native Properties |
|---|---|
| flex.gap_0 | { gap: 0 } |
| flex.gap_x_0 | { rowGap: 0 } |
| flex.gap_y_0 | { columnGap: 0 } |
| flex.gap_1 | { gap: 4 } |
| flex.gap_x_1 | { rowGap: 4 } |
| flex.gap_y_1 | { columnGap: 4 } |
| flex.gap_2 | { gap: 8 } |
| flex.gap_x_2 | { rowGap: 8 } |
| flex.gap_y_2 | { columnGap: 8 } |
| flex.gap_3 | { gap: 12 } |
| flex.gap_x_3 | { rowGap: 12 } |
| flex.gap_y_3 | { columnGap: 12 } |
| flex.gap_4 | { gap: 16 } |
| flex.gap_x_4 | { rowGap: 16 } |
| flex.gap_y_4 | { columnGap: 16 } |
| flex.gap_5 | { gap: 20 } |
| flex.gap_x_5 | { rowGap: 20 } |
| flex.gap_y_5 | { columnGap: 20 } |
| flex.gap_6 | { gap: 24 } |
| flex.gap_x_6 | { rowGap: 24 } |
| flex.gap_y_6 | { columnGap: 24 } |
| flex.gap_7 | { gap: 28 } |
| flex.gap_x_7 | { rowGap: 28 } |
| flex.gap_y_7 | { columnGap: 28 } |
| flex.gap_8 | { gap: 32 } |
| flex.gap_x_8 | { rowGap: 32 } |
| flex.gap_y_8 | { columnGap: 32 } |
| flex.gap_9 | { gap: 36 } |
| flex.gap_x_9 | { rowGap: 36 } |
| flex.gap_y_9 | { columnGap: 36 } |
| flex.gap_10 | { gap: 40 } |
| flex.gap_x_10 | { rowGap: 40 } |
| flex.gap_y_10 | { columnGap: 40 } |
| flex.gap_11 | { gap: 44 } |
| flex.gap_x_11 | { rowGap: 44 } |
| flex.gap_y_11 | { columnGap: 44 } |
| flex.gap_12 | { gap: 48 } |
| flex.gap_x_12 | { rowGap: 48 } |
| flex.gap_y_12 | { columnGap: 48 } |
| flex.gap_14 | { gap: 56 } |
| flex.gap_x_14 | { rowGap: 56 } |
| flex.gap_y_14 | { columnGap: 56 } |
| flex.gap_16 | { gap: 64 } |
| flex.gap_x_16 | { rowGap: 64 } |
| flex.gap_y_16 | { columnGap: 64 } |
| flex.gap_20 | { gap: 80 } |
| flex.gap_x_20 | { rowGap: 80 } |
| flex.gap_y_20 | { columnGap: 80 } |
| flex.gap_24 | { gap: 96 } |
| flex.gap_x_24 | { rowGap: 96 } |
| flex.gap_y_24 | { columnGap: 96 } |
| flex.gap_28 | { gap: 112 } |
| flex.gap_x_28 | { rowGap: 112 } |
| flex.gap_y_28 | { columnGap: 112 } |
| flex.gap_32 | { gap: 128 } |
| flex.gap_x_32 | { rowGap: 128 } |
| flex.gap_y_32 | { columnGap: 128 } |
| flex.gap_36 | { gap: 144 } |
| flex.gap_x_36 | { rowGap: 144 } |
| flex.gap_y_36 | { columnGap: 144 } |
| flex.gap_40 | { gap: 160 } |
| flex.gap_x_40 | { rowGap: 160 } |
| flex.gap_y_40 | { columnGap: 160 } |
| flex.gap_44 | { gap: 176 } |
| flex.gap_x_44 | { rowGap: 176 } |
| flex.gap_y_44 | { columnGap: 176 } |
| flex.gap_48 | { gap: 192 } |
| flex.gap_x_48 | { rowGap: 192 } |
| flex.gap_y_48 | { columnGap: 192 } |
| flex.gap_52 | { gap: 208 } |
| flex.gap_x_52 | { rowGap: 208 } |
| flex.gap_y_52 | { columnGap: 208 } |
| flex.gap_56 | { gap: 224 } |
| flex.gap_x_56 | { rowGap: 224 } |
| flex.gap_y_56 | { columnGap: 224 } |
| flex.gap_60 | { gap: 240 } |
| flex.gap_x_60 | { rowGap: 240 } |
| flex.gap_y_60 | { columnGap: 240 } |
| flex.gap_64 | { gap: 256 } |
| flex.gap_x_64 | { rowGap: 256 } |
| flex.gap_y_64 | { columnGap: 256 } |
| flex.gap_72 | { gap: 288 } |
| flex.gap_x_72 | { rowGap: 288 } |
| flex.gap_y_72 | { columnGap: 288 } |
| flex.gap_80 | { gap: 320 } |
| flex.gap_x_80 | { rowGap: 320 } |
| flex.gap_y_80 | { columnGap: 320 } |
| flex.gap_96 | { gap: 384 } |
| flex.gap_x_96 | { rowGap: 384 } |
| flex.gap_y_96 | { columnGap: 384 } |
Custom Flex Basis
Custom properties are usually rendered using _(customValue)
| Object | Native Properties |
|---|---|
| flex.gap_(customValue) | { gap: customValue } |
| flex.gap_x_(customValue) | { rowGap: customValue } |
| flex.gap_y_(customValue) | { columnGap: customValue } |