Flex basis, grow and shrink

Flex basis

Flex basis is an axis-independent way of giving an item its default size along the main axis. It works like width in a row container and like height in a column container. It is the item’s size before any growing or shrinking happens.

node.setFlexBasis(50);
node.setFlexBasis("25%");
node.setFlexBasis("auto");

Flex grow

Flex grow describes how remaining space in a container is distributed among its children along the main axis. After laying out its children, a container hands out any remaining space in proportion to each child’s flex grow value.

Flex grow accepts any number greater than or equal to 0. The default is 0.

node.setFlexGrow(1);

Flex shrink

Flex shrink describes how children are shrunk along the main axis when together they overflow the container. It is the mirror image of flex grow: overflow is treated as negative remaining space, taken back from each child in proportion to its flex shrink value.

Flex shrink accepts any number greater than or equal to 0. As in CSS, the default is 1, so children shrink unless told not to. Yoga’s default is 0.

node.setFlexShrink(0);

Flex

setFlex(n) is the shorthand: as in CSS, flex: n means flex-grow: n, flex-shrink: 1, flex-basis: 0.