Flex
Padding and background-color are added to all the FlexItem components on this documentation page for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
FlexGroup is for a single row layout
FlexGroup is useful for setting up layouts for a single row of content. By default any FlexItem within FlexGroup will stretch and grow to match their siblings.
Another content grid item
Note how both of these are the same width and height despite having different content?
FlexGroup can wrap its items
You can set wrap on FlexGroup if it contains FlexItems with minimum widths, which you want to wrap as the container becomes narrower.
IE11 does not properly wrap flex items if the group is also within a flex item. To fix this rendering issue, you need to add a class of .euiIEFlexWrapFix to the flex-item that contains the wrapping group.
FlexGroup accepts infinite items
Same code as above. Notice that FlexItem creates equal width items no matter the number of siblings. FlexGroup never wraps.
You can specify spans instead of divs
component=“span” can be set on FlexGroup and/or FlexItem.
FlexPanels grow to fill FlexItems
The Panel component will naturally grow to fill theFlexItem which contains it.
FlexItem
A side nav might be in this one.
And you would want the panel on the right to expand with it.
EuiPanelEuiPanel, with grow={false}.FlexItem can individually turn off stretching
Sometimes you do not want a FlexItem to grow. It can be turned off on each item individually.
FlexItem can specify a proportional width
You can specify a number between 1 and 10 for a FlexItem to try to take up a proportional part of the flex box it is in.
wraps content if necessary
expands_to_fit_if_content_cannot_wrap
FlexGroup can justify and align
FlexGroups can also use justifyContent and alignItems props that accept normal flex-box 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 FlexItems with grow=false so that they do not stretch.
I
am
really
tall
FlexGroup can change direction
You can change direction using the direction prop.
Depending on the nested structure of your flex groups, it is possible that flex-items inside a column directed flex group will not show. To counter this, add the grow prop and set to either false or a number. Setting grow to true will not suffice. You may also need to adjust the flex-basis value.
FlexGrids are for repeatable grids
FlexGrid is a more rigid component that sets multiple, wrapping rows of same width items.
FlexGrids can have set column widths
You can set a columns prop to specify anywhere between 1-4 columns. Any more would likely break on laptop screens.
FlexGrids can change direction
Adding direction="column" will re-orient the flex items so they display top-down then left to right.
FlexGrids and FlexGroups can nest
FlexGroup and FlexGrid can nest within themselves indefinitely. For example, here we turn off the growth on aFlexGroup, then nest a grid inside of it.
Nesting can cause some nasty bugs in IE11. There is no generalized way to fix IE without knowing the exact intention of the layout. Please refer to Flexbugs if you see rendering issues in IE.
Gutter sizing can be used on either FlexGroups or FlexGrids
The gutterSize prop can be applied to either aFlexGroup or a FlexGrid to adjust the spacing between FlexItems.
FlexGroups can turn off responsive layouts
By default EuiFlexGroup is responsive. 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.