Flex
Coloring and padding exist for examples only
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 />.
Spans instead of divs
Specify component=“span” on EuiFlexGroup and/or EuiFlexItem to change from the default div.
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.
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.
Change direction
You can change direction using the direction prop.
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.
Flex items are also a flexbox
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.