React App

Flex column sizes

React-flexybox uses a 12 column system. If any Row exceeds 12 columns, it will wrap

Use flex by itself to set auto grow

variable width content table up remaining columnds

<Row gutter={3}>
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />
  <Col flex={1} />

  <Col flex={1} />
  <Col flex={10} />
  <Col flex={1} />

  <Col flex={2} />
  <Col flex={2} />
  <Col flex={2} />
  <Col flex={2} />
  <Col flex={2} />
  <Col flex={2} />

  <Col flex={1} />
  <Col flex />
</Row>

Gutter Margins

By default there are no gutters on Col flex items. You can add a custom gutter on Row via thegutter property.

<Row>
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

<Row gutter={5}>
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

<Row gutter={15}>
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

Responsive Sizing

You can use flex together with xs, sm, md, lg to override the default flex

e.g. override flex when xs or sm and uses flex for all remaining sizes

<Row gutter={3}>
  <Col flex={3} xs={12} sm={2} md={6} />
  <Col flex={3} xs={12} sm={4} md={6} />
  <Col flex={3} xs={12} sm={4} md={6} />
  <Col flex={3} xs={12} sm={2} md={6} />
</Row>

size	description
flex	sets the default flex size. if no value is specified the zize will auto grow
xs	0 - 599px
sm	600 - 959px
md	960px - 1280px
lg	1280px or greater

Flex for page layouts

React-flexybox is easy to use for web layouts across all screen sizes

header

aside 1

content

aside 2

footer

<Row>
  <Col flex={12} xs={12} />
    header
  </Col>
  <Col flex={2} xs={12} />
    aside 1
  </Col>
  <Col flex={8} xs={12} />
    content
  </Col>
  <Col flex={2} xs={12} />
    aside 2
  </Col>
  <Col flex={12} xs={12} />
    footer
  </Col>
</Row>

Fill shortcut

The full shortcut is useful if you want to fill a Row to 100% of the contaning element

filled 100% of parent height

<div style={{ height: '8em' }}>
  <Row gutter={3} fill>
    <Col flex={3} />
    <Col flex={3} />
    <Col flex={3} />
  </Row>
</div>

Default alignment

Flex alignments default to the flexbox spec. If you want to center horizontally just add justifyContent="center"

<Row gutter={3}>  <!-- justifyContent="center" to align horizonally -->
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

Center alignment shortcut - verically and horizontally

To center flex items both verically and horizontally you can use center shortcutcenter is the equivalent of alignItems="center" justifyContent="center"

<Row gutter={3} center>
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

Bottom alignment

You can align flex items to the bottom of the Row. If you want to center horizontally just add justifyContent="center"

<Row gutter={3} alignItems="flex-end">  <!-- justifyContent="center" to align horizonally -->
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

space-between center alignment

Here we use a combo of justifyContent="space-between" and alignItems="center"

<Row gutter={3} justifyContent="space-between" alignItems="center">
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
</Row>

Alignment self

We can specity alignSelf for each flex item in a Row

<Row gutter={3}>
  <Col flex={4} />
  <Col flex={4} alignSelf="center" />
  <Col flex={4} alignSelf="flex-end" />
</Row>

Container

Container is an optional Wrapper that centers all flex items within Row to a fixed width.

<Container>
  <Row gutter={3}>
    <Col flex={6} />
    <Col flex={6} />
    <Col flex={6} />
    <Col flex={6} />
  </Row>
</Container>

Using the fluid prop makes the contents of Row 100% width of the browser window

<Container fluid>
  <Row gutter={3}>
    <Col flex={6} />
    <Col flex={6} />
    <Col flex={6} />
    <Col flex={6} />
  </Row>
</Container>

Debug

Debug can be helpful as you compose or troubleshoot your react-flexybox layouts

<Row debug>
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={3} />
  <Col flex={12} />
  <Col flex={6} />
  <Col flex={6} />
  <Col flex />
</Row>