flex

Flex allows you to define how this component should take up space within its parent. It's comprised of the following properties:

flex-grow: This component should take up remaining space in its parent. If multiple children of the parent have a flex-grow set, the extra space is divided up based on proportions of flex-grow values, i.e. a child with flex-grow of 2 will get twice as much of the space as its sibling with flex-grow of 1.

flex-shrink: This component should shrink if necessary. Similar to flex-grow, the value determines the proportion of space taken from each child. Setting a flex-shink of 0 means the child won't shrink.

flex-basis: Defines the default size of the component before extra space is distributed. If omitted, the measured size of the content (or the width/height styles) will be used instead.

flex-basis-percent: see flex-basis. Defines the default size as a percentage of its parent's size. Values should be from 0 to 100.

• See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more documentation on flexbox properties.

• See https://yogalayout.dev/ for a web-based playground for trying out flexbox layouts.

Defaults: flex-grow = 0, flex-shrink = 1, flex-basis = null, flex-basis-percent = null