Flex

Import#

import { Flex, FlexItem } from '@volue/wave-react';

• ​
  Flex: The main wrapper with display: flex.
• ​
  FlexItem: Used as a child of Flex to control growing and shrinking based on available space.

Background#

The primary job of Flex is to lay out a horizontal row of content or a vertical stack of content. On top of that it provides fine-grained control of spacing and alignment, making it a perfect candidate for small-scale layout tasks.

Flex is abstraction over CSS Flexbox Module​.

Examples#

Flow#

Horizontal#

Vertical#

Change flow to column to render items in a stack.

Reversed#

You can reverse the visual flow using flow="column-reverse"

And row-reverse

White space#

Flow elements require space to physically and conceptually separate them from the elements that come before and after them. Ideally these elements should not provide surrounding white space, instead spacing should be owned by layout components. Flex is exactly such a layout primitive: it injects gap between elements via their common parent.

spacingS#

spacingXl#

Different spacing per breakpoint#

Wrap#

Control content wrapping via wrap property. Items inside Flex will wrap onto multiple lines naturally, and without the need for any viewport @media queries.

List of tags#

Alignment#

Since Flex layout is used to lay out elements in horizontal rows or vertical columns, use main and cross to align the items across main axis or cross axis.

main="end"#

main="center"#

cross="center"#

main="space-between"#

Spacing between items is now controlled by the container size:

Buttons aligned to the right#

Complex buttons layout#

Flex item#

You can use FlexItem component to control how a flex item will behave inside a Flex container. FlexItem exposes properties such as flex, grow and shrink. You can also change cross alignment and order on an individual flex item.

flex#

flex property sets how a FlexItem will grow or shrink to fit the available space.

flex="initial" (default)

The item is sized according to its content or the value of its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to flex: 0 1 auto in CSS and is the default behavior for the children elements within a Flex container.

flex="1"

The item will grow to absorb any extra free space in the flex container and shrink as needed to fit the container without taking its initial size into account. This is equivalent to flex: 1 1 0% in CSS. Useful to set all items to be of equal width no matter their content.

flex="auto"

The item is sized according to its content or the value of its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to flex: 1 1 auto in CSS.

flex="none"

The item is sized according to its content or the value of its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.

grow#

Use grow property to control how FlexItem grows.

shrink#

Use shrink property to control how FlexItem shrinks.

order#

Use order property to render FlexItem in a different order than it appears in the source code.

alignment#

Use crossSelf property to align individual FlexItem on the cross axis.

Shrinking past content size#

There is a behavior that can sometimes be surprising when using Flex layout. The content of a FlexItem can force it to not shrink properly, for example when you have a long word or URL that you want to truncate. The reason is that flex items won’t shrink below their minimum content size.

You can get around this behavior by setting shrinkPastContentSize property which applies min-width: 0 to the flex item.

Nesting#

Multiple Flex components can be nested. Below is a demo of a nested structure to create more complex white space rules.

API Reference#

Flex#

FlexItem#