Flex

A wrapper component that extends Box to create layouts using Flexbox.

import {Box, Flex} from "@nulogy/components";

<Flex bg="lightBlue">
  <Box width={1/2} p="x3" m="x3" bg="blackBlue"></Box>
  <Box width={1/2} p="x3" m="x3" bg="darkBlue"></Box>
</Flex>

Responsive

Like Box, all props can be used responsively by using an object that defines small, medium and/or large, based on the theme.breakpoints object

This example displays columns on small screens and rows on large ones.

<Flex bg="lightBlue" flexDirection={{extraSmall: "column", medium: "row"}}>
  <Box width={1/2} p="x3" m="x3" bg="blackBlue"></Box>
  <Box width={1/2} p="x3" m="x3" bg="darkBlue"></Box>
</Flex>

Props

Because Flex is an extension of Box it accepts all the same props but adds the following:

NameTypeDefaultDescription

alignItems

String

stretch

Sets align-items. Accepts flex-start, flex-end, center, or stretch.

flexDirection

String

row

Set the flex-direction. Accepts row, column, row-reverse or column-reverse

flexWrap

String

nowrap

Set the flex-wrap. Accepts no-wrap, wrap, or wrap-reverse

justifyContent

String

flex-start

Sets justify-content. Accepts flex-start, flex-end, center, space-around, or space-evenly

className

String

undefined

className passed to the flex component.

Related components