Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
    • Flex
      • Flex groups
      • Flex items
      • Flex grids
    • Header
    • Horizontal rule
    • Page components
    • Page header
    • Spacer
  • Containers
  • Navigation
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Layout
  • Flex

Flex

Use cases

  • EuiFlexGroup is useful for single row layouts and for quick alignment of items.
  • EuiFlexGrid should be used for repeated wrapping rows of same-width items.
  • EuiFlexItem should be used as a direct child of both groups or grids. It can also, depending on the layout, be omitted if its automatic flex or grow behavior is not desired.

Shared behavior

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.

Nesting flex layouts

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. If your children are not behaving correctly, consider using one of these flex item workarounds.

Loading...

Overriding output component type

The component prop can be passed to either the parent EuiFlexGroup or EuiFlexGrid, or the child 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.

This allows you to use semantic tags such as <form> with flex layouts, or obey rules around nesting block elements within inline elements.

Loading...
Edit this page

Previous
Overview
Next
Flex groups
  • Use cases
  • Shared behavior
    • Nesting flex layouts
    • Overriding output component type
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic