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

Extends HTMLAttributes


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 such as `'div'` or `'span'`, a React component (a function, a class, or an exotic component like `memo()`). `EuiFlexGroup` accepts and forwards all extra props to the custom component. Type: `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