Flex & FlexItem

Interface of Flex
🏗 Coming Soon

The <Flex /> component creates a flex container for you to place <FlexItem /> components inside. It lets you utilize flex box to create a wide variety of layouts, with powerful alignment, directional, and space distribution abilities.

If you are not familiar with flex box, here is a great guide for how it works.

Basic Usage

The <Flex /> component has the ability to control the layout direction and order of its children. By default the children will layout in a row.

👋
💪
📦

A real world example

Using our <Flex> and <FlexItem> components we can quickly scaffold out real world use cases like a navigation bar.

Browse
Explore
Develop
Admin

Changing direction and order

You can change the layout direction and order of flex children by using the flexDirection property. Below we use the same children in each example but can adjust the layout quickly using flexDirection.

1️⃣
2️⃣
3️⃣
1️⃣
2️⃣
3️⃣
1️⃣
2️⃣
3️⃣
1️⃣
2️⃣
3️⃣

Item distribution

The <Flex> component allows you to control how its children are distributed within its container. Using the justifyContent property you can adjust the distribution of the children. Below is a table with all the justify options:

Justify PropertyBehavior
centerPack items around the center
flex-startPack items from the start
flex-endPack items from the end
space-betweenDistribute items evenly. The first item is flush with the start, the last is flush with the end
space-aroundDistribute items evenly. Items have a half-size space on either end
space-evenlyDistribute items evenly. Items have equal space around them
stretchDistribute items evenly. Items stretched to fit the container

Here is a visual example of how using justifyContent affects the distribution of items in a <Flex /> component.

🕺
🎶
💃
🕺
🎶
💃
🕺
🎶
💃
🕺
🎶
💃
🕺
🎶
💃
🕺
🎶
💃

Aligning Items

Flex box allows for quickly adjusting the alignment of items inside the flex container. Below are available alignment types:

AlignItems PropertyBehavior
centerItems are aligned center of container
flex-startItems are aligned to the start of the container
flex-endItems are aligned to the start of the container
baselineAll items are aligned so their baselines align
stretch (default)Items stretched to fit the container

Here is an example of using alignItems to adjust how items are aligned within the flex container.

Default (stretch)
One
Two
Three
Center
One
Two
Three
Start
Two
Three
Four
End
Two
Three
Four
Baseline
Two
Three
Four

Aligning Content

If you have multiple rows of flex items, the alignContent property determines how the rows are distributed within the flex container.

AlignContent PropertyBehavior
centerLines are packed to the center of container
flex-startLines are packed to the start of the container
flex-endLines are packed to the start of the container
space-betweenLines evenly distributed. First line at start of container, last line at end of container
space-aroundLines evenly distributed. Even space around each line
stretch (default)Items stretched to fit the container
Aligned w/
Space
Betwen
Aligned w/
Flex
End
Aligned w/
Flex
Center

Wrapping Flex Items

The flexWrap property determines if flex items should be forced into a single line or if they can wrap onto multiple lines.

These Lines
Will NOT
Wrap
These Lines
Will
Wrap
These Lines
Will
Wrap Reverse

Responsive Behavior

Many of the properties you can set on the <Flex /> component will accept an array of values that will then be applied at different breakpoints. There are 5 breakpoints slots that you can target. Here is an example of what that looks like.

👋
💪
📦

FlexItem

Interface of FlexItem
🏗 Coming Soon

The <FlexItem /> component lets you have more control of the properties that apply to just children inside a <Flex /> container. These properties affect how a flex item aligns its self, it's order, and how it resizes to fill the available space in the flex container.

Adjusting Individual Alignment

Using the alignSelf property on a <FlexItem /> allows you to override the the alignItems value from the flex container. This is useful if you need to adjust how a single flex item aligns itself in the container.

alignSelf PropertyBehavior
centerPack items around the center
flex-startPack items from the start
flex-endPack items from the end
baselineItem aligned to its baseline
stretch (default)stretch to the container
Flex Start
Flex End
Center
Baseline

Item Order

By default flex items are laid our in source order, the order property on a <FlexItem /> allows you to adjust how an individual flex item is is ordered in a flex container.

Note: the order value default is 0, so setting an order="1" will put the item at the end unless another flex item has a higher order set. You can also use negative numbers to set an item at the beginning.

0
1
2
3
4
0
1
2
3
4

Controlling Item Size

The <FlexItem> has two properties for managing its size. You can use the flexBasis property or the flex property.

Flex Basis example.

The flexBasis property defines the flex-items' default size before the remaining space is distributed.

I am 20% of container
I am 5.5rem of container
I am 150px of container
I am sized to my content

Flex Example

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis properties. It specifies how a flex item will grow or shrink to fit the space in its flex container.

Note: The flex syntax can be a bit confusing, if you need a more detail set of examples check out this MDN flex overview.

flex PropertyBehaviorAcceptsflex-growSpecifies the grow factor of a flex itemA positive unitless numberflex-shrinkSpecifies the shrink factor of a flex itemA positive unitless numberflex-basisSpecifies the flex items sizeA valid width unit

Flex Grow Example

Below we set the flex grow value of the first flex item to 2 so it will take up a factor of two in the flex container

Flex: 2
Flex: 1
Flex: 1

Flex Shrink

Below we have a flex container with a set width of 500px and each child's flex-basis is set to 200px. The flex shrink value on the last two flex items is set to 1 and they will now shrink so that all the flex items fit within the flex container.

No Shrink
I'll shrink
I'll shrink