Flex groups
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.
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.Responsive flex groups
EuiFlexGroup is responsive by default, stacking items vertically on smaller screens. If you need to disable this behavior (e.g. for groups only used for alignment and margins rather than layouts), apply the
responsive={false} prop to retain a single row layout at all screen sizes.
Display customization
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.
Gutter sizing
The gutterSize prop can be applied to a parent EuiFlexGroup to adjust the spacing between child EuiFlexItems.
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.
Changing direction
You can change direction using the direction prop.
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 | 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 |