Skip Navigation
React Magma

Flex

The Flex component provides an easy way to lay out elements in rows or columns using CSS flex-box. It is based on a 12-column layout, and can be responsive to different screen sizes.

Basic Usage

The Flex component has two types of layout, container and item, defined by the behavior prop. A Flex component can also have a beavhior of both, and it will act as both a container and item.

Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. To specify the number of columns an item should take up, use a number 1-12 in the xs prop (meaning all screen sizes, extra-small and up).

import React from 'react';


import { Flex, FlexBehavior, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Flex behavior={FlexBehavior.container} spacing={2}>
      <Flex behavior={FlexBehavior.item} xs={12}>
        <Card>
          <CardBody>xs=12</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6}>
        <Card>
          <CardBody>xs=6</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6} sm={6}>
        <Card>
          <CardBody>xs=6</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={3}>
        <Card>
          <CardBody>xs=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={3}>
        <Card>
          <CardBody>xs=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={3}>
        <Card>
          <CardBody>xs=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={3}>
        <Card>
          <CardBody>xs=3</CardBody>
        </Card>
      </Flex>
    </Flex>
  );
}

Responsive behavior

To specify a different layout for different screen sizes, you can use any of the five breakpoint props: xs, sm, md, lg, xl. The items will take up the specified number of columns for that breakpoint and up.

import React from 'react';


import { Card, CardBody, Flex, FlexBehavior } from 'react-magma-dom';


export function Example() {
  return (
    <Flex behavior={FlexBehavior.container} spacing={2}>
      <Flex behavior={FlexBehavior.item} xs={12}>
        <Card>
          <CardBody>xs=12</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={12} md={6}>
        <Card>
          <CardBody>xs=12 md=6</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={12} md={6}>
        <Card>
          <CardBody>xs=12 md=6</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6} md={3}>
        <Card>
          <CardBody>xs=6 md=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6} md={3}>
        <Card>
          <CardBody>xs=6 md=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6} md={3}>
        <Card>
          <CardBody>xs=6 md=3</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={6} md={3}>
        <Card>
          <CardBody>xs=6 md=3</CardBody>
        </Card>
      </Flex>
    </Flex>
  );
}

Spacing

The spacing prop can be used to determine the amount of space between flex items. The value of the spacing prop is multiplied by the theme spacingMultiplier, which is 8px, but can be overridden with a custom theme.

import React from 'react';


import { Flex, FlexBehavior, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Flex behavior={FlexBehavior.container} spacing={4}>
      <Flex behavior={FlexBehavior.item} xs={4}>
        <Card>
          <CardBody>Content</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={4}>
        <Card>
          <CardBody>Content</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item} xs={4}>
        <Card>
          <CardBody>Content</CardBody>
        </Card>
      </Flex>
    </Flex>
  );
}

Auto-Width

If you simply set the value of a breakpoint prop to true, the item will fill the available space, sharing the space equally with other items. That also means you can set the width of one item and the others will automatically resize around it.

import React from 'react';


import { Flex, FlexBehavior, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Flex behavior={FlexBehavior.container} spacing={2}>
        <Flex behavior={FlexBehavior.item} xs>
          <Card>
            <CardBody>Auto-width</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs>
          <Card>
            <CardBody>Auto-width</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs>
          <Card>
            <CardBody>Auto-width</CardBody>
          </Card>
        </Flex>
      </Flex>
      <Flex behavior={FlexBehavior.container} spacing={2}>
        <Flex behavior={FlexBehavior.item} xs={6}>
          <Card>
            <CardBody>6 colums</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs>
          <Card>
            <CardBody>Auto-width</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs>
          <Card>
            <CardBody>Auto-width</CardBody>
          </Card>
        </Flex>
      </Flex>
    </>
  );
}

Nested

By using FlexBehavior.both, a Flex component can behave as both an container and item.

import React from 'react';


import { Flex, FlexBehavior, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Flex behavior={FlexBehavior.container} spacing={1}>
      <Flex behavior={FlexBehavior.both} xs={12} spacing={3}>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 1A</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 2A</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 3A</CardBody>
          </Card>
        </Flex>
      </Flex>
      <Flex behavior={FlexBehavior.both} xs={12} spacing={3}>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 1B</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 2B</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 3B</CardBody>
          </Card>
        </Flex>
      </Flex>
      <Flex behavior={FlexBehavior.both} xs={12} spacing={3}>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 1C</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 2C</CardBody>
          </Card>
        </Flex>
        <Flex behavior={FlexBehavior.item} xs={4}>
          <Card>
            <CardBody>item 3C</CardBody>
          </Card>
        </Flex>
      </Flex>
    </Flex>
  );
}

Other Flex Properties

The alignItems, alignContent, justify, direction and wrap props can be used to set the css values for align-items, align-content, justify-content, flex-direction and flex-wrap respectively.

import React from 'react';


import {
  Card,
  CardBody,
  Flex,
  FlexAlignItems,
  FlexBehavior,
  FlexJustify,
  FlexWrap,
} from 'react-magma-dom';


export function Example() {
  const cardStyles = { height: '100%', 'text-align': 'center' };


  return (
    <Flex
      behavior={FlexBehavior.container}
      alignItems={FlexAlignItems.center}
      justify={FlexJustify.center}
      spacing={2}
      wrap={FlexWrap.nowrap}
    >
      <Flex behavior={FlexBehavior.item}>
        <Card style={cardStyles}>
          <CardBody>Card Item</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Card style={cardStyles}>
          <CardBody>
            Taller
            <br />
            Card Item
          </CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Card style={cardStyles}>
          <CardBody>Card Item</CardBody>
        </Card>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Card style={cardStyles}>
          <CardBody>Card Item</CardBody>
        </Card>
      </Flex>
    </Flex>
  );
}

Flex Props

This component uses forwardRef. The ref is applied to the Announce container div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

alignContent

Description

Defines the align-content style property. It's applied for all screen sizes.

Type

enum, one of:
FlexAlignContent.center
FlexAlignContent.flexEnd
FlexAlignContent.flexStart
FlexAlignContent.spaceAround
FlexAlignContent.spaceBetween
FlexAlignContent.stretch

Default

FlexAlignContent.stretch

alignItems

Description

Defines the align-items style property. It's applied for all screen sizes.

Type

enum, one of:
FlexAlignItems.baseline
FlexAlignItems.center
FlexAlignItems.flexEnd
FlexAlignItems.flexStart
FlexAlignItems.stretch

Default

FlexAlignItems.stretch

behavior

Required

Description

Defines the flex behavior for the component. Options are container, item or both. You should be wrapping items with a container.

Type

enum, one of:
FlexBehavior.both
FlexBehavior.container
FlexBehavior.item

Default

-

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

direction

Description

Defines the flex-direction style property. It's applied for all screen sizes.

Type

enum, one of:
FlexDirection.column
FlexDirection.columnReverse
FlexDirection.row
FlexDirection.rowReverse

Default

FlexDirection.row

justify

Description

If true, the component will have the flex item behavior. You should be wrapping items with a container.

Type

enum, one of:
FlexJustify.center
FlexJustify.flexEnd
FlexJustify.flexStart
FlexJustify.spaceAround
FlexJustify.spaceBetween
FlexJustify.spaceEvenly

Default

FlexJustify.flexStart

lg

Description

Defines the number of grids the component is going to use. It's applied for the large breakpoint and wider screens.

Type

false | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Default

false

md

Description

Defines the number of grids the component is going to use. It's applied for the medium breakpoint and wider screens.

Type

false | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Default

false

sm

Description

Defines the number of grids the component is going to use. It's applied for the small breakpoint and wider screens.

Type

false | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Default

false

spacing

Description

Defines the space between the type item component. Spacing will be this number multiplied by 8px. It can only be used on a type container component.

Type

number

Default

0

wrap

Description

Defines the flex-wrap style property. It's applied for all screen sizes.

Type

enum, one of:
FlexWrap.nowrap
FlexWrap.wrap
FlexWrap.wrapReverse

Default

FlexWrap.wrap

xl

Description

Defines the number of grids the component is going to use. It's applied for the extra-large breakpoint and wider screens.

Type

false | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Default

false

xs

Description

Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.

Type

false | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Default

false

On this page

Deploys by Netlify