Flex

A flex container used for customizable layouts.

Item 1
Item 2
Item 3
Item 4

Edit the code below to see your changes live!

API

Flex

Prop Name
Type
Default
Description
alignContentstretch | center | flex-start | flex-end | space-between | space-aroundstretch

Modifies the behavior of the flex-wrap property on the vertical axis. Same as the align-content CSS property.

alignItemsnormal | stretch | center | flex-start | flex-end | baselinestretch

Specifies the default alignment for items in a flex container. Same as the align-items CSS property.

flexDirectionrow | column | row-reverse | column-reverserow

Determines the direction of flex items. Same as the flex-direction CSS property.

justifyContentcenter | flex-start | flex-end | left | right | normal | space-between | space-around | space-evenly | stretchflex-start

Modifies the behavior of the flex-wrap property on the horizontal axis. Same as the justify-content CSS property.

flexWrapnowrap | wrap | wrap-reversednowrap

Controls whether flex items should wrap or not. Same as the flex-wrap CSS property.

Props ending with * are required

FlexItem

Prop Name
Type
Default
Description
alignSelfauto | flex-start | flex-end | center | baseline | stretchauto

Overrides the flex items container align-items property. Same as the align-self CSS property.

flexBasisauto | fill | min-content | max-content | fit-content | content | stringauto

Specifies the inital length of a flex item. Same as the flex-basis CSS property.

flexGrownumber0

Determines how much a flex item can grow relative to the rest of the flex items. Same as the flex-grow CSS property.

flexOrdernumber0

Modifies which order a flex item will appear relative to the other flex items in the container. Same as the order CSS property.

flexShrinknumber1

Determines how much a flex item can shrink relative to the rest of the flex items. Same as the flex-shrink CSS property.

Props ending with * are required

Inherited Props

Expand

Box Props

Expand

Display Props

Expand

Margin Props

Expand

Padding Props

Examples

Flex container's can space their element with uniform spacing in-between each flex item using the justifyContent prop.

Item 1
Item 2
Item 3
Item 4

Edit the code below to see your changes live!

One way of creating a column based layout is using a combination of the flexWrap prop on the flex container with an additional flexBasis prop on the flex items.

Item 1
Item 2
Item 3
Item 4

Edit the code below to see your changes live!

Using the flexOrder prop you can reorganize content based on the size generated by setting the flexGrow prop. flexGrow allows the flex items to grow relative to the flex container's width.

Item 1
Item 2
Item 3
Item 4

Edit the code below to see your changes live!

Beta