React-flexybox uses a 12 column system. If any Row
exceeds 12 columns, it will wrap
Use flex
by itself to set auto grow
<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>
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>
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 |
React-flexybox is easy to use for web layouts across all screen sizes
<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>
The full shortcut is useful if you want to fill a Row to 100% of the contaning element
<div style={{ height: '8em' }}>
<Row gutter={3} fill>
<Col flex={3} />
<Col flex={3} />
<Col flex={3} />
</Row>
</div>
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>
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>
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>
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>
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 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 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>