Flex
Use cases
- EuiFlexGroup is useful for single row layouts and for quick alignment of items.
- EuiFlexGrid should be used for repeated wrapping rows of same-width items.
- EuiFlexItem should be used as a direct child of both groups or grids. It can also, depending on the layout, be omitted if its automatic flex or grow behavior is not desired.
Shared behavior
Coloring and padding exist for examples only
Padding and background-color are added to all EuiFlexItems on this documentation page for illustrative purposes only. If needed, you must add your own padding through additional components or classes.
Nesting flex layouts
EuiFlexGroup and EuiFlexGrid can nest within themselves indefinitely. For example, here we turn off the growth on a EuiFlexGroup, then nest a grid inside of it.
Flex items are also a flexbox
To support nested stretching of items, EuiFlexItem also has
display: flex on it. If your children are not behaving correctly, consider using one of these flex item workarounds.Overriding output component type
The component prop can be passed to either the parent EuiFlexGroup or EuiFlexGrid, or the child EuiFlexItem, to change the rendered component type from the default div. It can be any valid React component type like a tag name string such as divor span or a React component.
This allows you to use semantic tags such as <form> with flex layouts, or obey rules around nesting block elements within inline elements.