flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.įlexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.įlexGrow accepts any floating point value >= 0, with 0 being the default value. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.įlexGrow describes how any space within a container should be distributed among its children along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. 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.įlexBasis is an axis-independent way of providing the default size of an item along the main axis. Space-evenly Evenly distribute children within the alignment container along the main axis. 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. Space-around Evenly space off children across the container's main axis, distributing the remaining space around the children. Space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.

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.įlex-start( default value) Align children of a container to the start of the container's main axis.įlex-end Align children of a container to the end of the container's main axis.Ĭenter Align children of a container in the center of the container's main axis.

Justif圜ontent describes how to align children within the main axis of their container.

Display flex horizontal align