Flex items
To work correctly, EuiFlexItem must be a direct child of
EuiFlexGroup or EuiFlexGrid. You cannot have any intermediate HTML wrappers between them.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.
Flex items are also flex
To allow for continued stretching of nested flex groups/grids and their items, each EuiFlexItem also has the property of
display: flex.This can sometimes cause unwanted layouts of your content when there are multiple elements, or if the element itself also has some specific display property. To alleviate this, the simplest method is to wrap your inner children with a HTML wrapper like a <div /> or <span />.
Alternatively, you can sometimes opt to omit EuiFlexItem completely.
Panels grow vertically to fill flex items
The EuiPanel component will naturally grow to fill the EuiFlexItem which contains it.
Grow
The grow prop of EuiFlexItem only applies when used within EuiFlexGroup. It is ignored by EuiFlexGrid, which enforces the same width for each item.
Turning off item stretching
By default, all EuiFlexItems will grow horizontally within their flex group if the grow prop is not specified. This can be turned off for each item individually via grow={false}.
Proportional widths of items
Alternatively, you can specify a grow number between 1 and 10 for each EuiFlexItem to take up a proportional percentage of the EuiFlexGroup it is in.
Props
EuiFlexItem
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop grow# | Description and type Type: boolean | 0 | 5 | 2 | 8 | 3 | 7 | 1 | 4 | 6 | 9 | 10 | Default value true |
Prop component# | Description and type Customize the component type that is rendered. It can be any valid React component type like a tag name string
ElementType | Default value 'div' as TComponent |
Prop ref# | Description and type Type: Ref<TComponentRef> | Default value |