Flex
Padding and background-color are added to all the EuiFlexItem components on this documentation page for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
Flex group is for a single row layout
EuiFlexGroup is useful for setting up layouts for a single row of content. By default any EuiFlexItem within EuiFlexGroup will stretch and grow to match their siblings.
Flex items are also flex
To allow for continued stretching of nested EuiFlexGroup's and its items, each EuiFlexItem also has the property of display: flex. This can 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 simple HTML element like a <div /> or <span />.
Override output component type
Pass the component property to EuiFlexGroup and/or 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.
Panels grow to fill flex items
The EuiPanel component will naturally grow to fill the EuiFlexItem which contains it.
Turn off item stretching
Sometimes you do not want a EuiFlexItem to grow horizontally. It can be turned off for each item individually.
Proportional widths of items
You can specify a number between 1 and 10 for each EuiFlexItem to take up a proportional percentage of the EuiFlexGroup it is in.
Justify and align
EuiFlexGroups have the props justifyContent and alignItems that accept normal flexbox parameters. Below are some common scenarios, where you need to separate two items, center justify a single one, or center an item vertically. Note the usage of EuiFlexItems with grow=false so that they do not stretch.
Change direction
You can change direction using the direction prop.
Allowing flex items to wrap
You can set wrap on EuiFlexGroup if it contains EuiFlexItems with minimum widths, which you want to wrap as the container becomes narrower.
Responsive flex groups
By default EuiFlexGroup is responsive by always stacking the items on smaller screens. However, often you only want to use groups for alignment and margins, rather than layouts. Simply apply the responsive={false} prop to retain a single row layout for the group.
Flex grids are for repeatable items
EuiFlexGrid is a more rigid component that sets multiple, wrapping rows of same width items. You can set a columns prop to specify anywhere between 1-4 columns. Any more would likely break on laptop screens.
Flex grids can change direction
Adding direction="column" will re-orient the flex items so they display top-down then left to right.
Responsive flex grids
EuiFlexGrid is also similarly responsive by default, responsive by always stacking the items vertically on smaller screens. However, should you want to customize the number of items on small or large screens, we recommend applying the responsive={false} prop and then conditionally pass a column number based on the current breakpoint.
Flex grids and flex groups can nest
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.
To support nested stretching of items, EuiFlexItem also has display: flex on it so if your children are not behaving correctly, you may want to wrap them in a <div />.
Gutter sizing
The gutterSize prop can be applied to either a EuiFlexGroup or a EuiFlexGrid to adjust the spacing between EuiFlexItems.
Props
EuiFlexGroup
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 alignItems# | Description and type Type: "center" | "stretch" | "baseline" | "flexStart" | "flexEnd" | Default value stretch |
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 direction# | Description and type Type: "column" | "row" | "rowReverse" | "columnReverse" | Default value row |
Prop gutterSize# | Description and type Type: "xs" | "s" | "m" | "l" | "xl" | "none" | Default value l |
Prop justifyContent# | Description and type Type: "center" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | "spaceEvenly" | Default value flexStart |
Prop responsive# | Description and type Type: boolean | Default value true |
Prop wrap# | Description and type Type: boolean | Default value false |
Prop ref# | Description and type Type: Ref<TComponentRef> | Default value |
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 | 6 | 1 | 4 | 7 | 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 |
EuiFlexGrid
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. 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 children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
Prop columns# | Description and type Number of columns. Accepts 2 | 3 | 1 | 4 | Default value 1 |
Prop direction# | Description and type Flex layouts default to left-right then top-down ( "column" | "row" | Default value row |
Prop alignItems# | Description and type Aligns grid items vertically "center" | "stretch" | "end" | "start" | "baseline" | Default value stretch |
Prop gutterSize# | Description and type Space between flex items "s" | "m" | "l" | "xl" | "none" | Default value l |
Prop responsive# | Description and type Will display each item at full-width on smaller screens boolean | Default value true |
Prop component# | Description and type The tag to render ElementType | Default value div |