components

Flex (code)

Flex components can be used to wrap a set of other elements in a flexible way. It's an extension of Box.

Just flexing

import { Flex } from '@mediahuis/chameleon-react'

<Flex alignItems="center" justifyContent="space-around">
  <Box>Just flexing</Box>
  <Button>Click me!</Button>
</Flex>

<Flex alignItems="center" justifyContent="space-around">
  <Box>Just flexing</Box>
  <Button>Click me!</Button>
</Flex>

Props

Name	Type	Default	Required	Description
alignContent	'center''flex-end''flex-start''space-around''space-between''space-evenly''stretch'Array<String>{ "xs": "String" "sm": "String" "md": "String" "lg": "String" "xl": "String" }	-	-	Flex alignContent.
alignItems	'baseline''center''flex-end''flex-start''stretch'Array<String>{ "xs": "String" "sm": "String" "md": "String" "lg": "String" "xl": "String" }	-	-	Flex alignItems.
className	String	-	-	Extend classNames.
display	'flex''inline-flex'	'flex'	-	Display flex or inline-flex
flexDirection	'column-reverse''column''row-reverse''row'Array<String>{ "xs": "String" "sm": "String" "md": "String" "lg": "String" "xl": "String" }	-	-	Flex flexDirection.
flexWrap	'nowrap''wrap''wrap-reverse'Array<String>{ "xs": "String" "sm": "String" "md": "String" "lg": "String" "xl": "String" }	-	-	Flex flexWrap.
justifyContent	'center''flex-end''flex-start''space-around''space-between''stretch''space-evenly'Array<String>{ "xs": "String" "sm": "String" "md": "String" "lg": "String" "xl": "String" }	-	-	Flex justifyContent.

System Props

bgColor

borderBottomColor, borderBottomStyle, borderBottomWidth, borderColor, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTopColor, borderTopStyle, borderTopWidth, borderWidth

borderRadius

color

alignContent, alignItems, flexDirection, flexWrap, justifyContent

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

float

height, maxHeight

m, mb, ml, mr, mt, mx, my

p, pb, pl, pr, pt, px, py

position, bottom, left, right, top, zIndex

fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform

width, maxWidth

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

alignContent

<Box height="300px" width="70px" clone>
  <Flex alignContent="center" flexWrap="wrap">
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" width="70px" clone>
  <Flex alignContent="center" flexWrap="wrap">
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

Responsive { }

<Box height="300px" width="70px" clone>
  <Flex
    alignContent={{
      xs: 'stretch',
      sm: 'center',
      md: 'space-between',
      lg: 'space-evenly',
      xl: 'space-around',
    }}
    flexWrap="wrap"
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" width="70px" clone>
  <Flex
    alignContent={{
      xs: 'stretch',
      sm: 'center',
      md: 'space-between',
      lg: 'space-evenly',
      xl: 'space-around',
    }}
    flexWrap="wrap"
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

Responsive [ ]

<Box height="300px" width="70px" clone>
  <Flex
    alignContent={[
      'stretch',
      'center',
      'space-between',
      'space-evenly',
      'space-around',
    ]}
    flexWrap="wrap"
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" width="70px" clone>
  <Flex
    alignContent={[
      'stretch',
      'center',
      'space-between',
      'space-evenly',
      'space-around',
    ]}
    flexWrap="wrap"
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

alignItems

<Box height="300px" clone>
  <Flex alignItems="center">
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" clone>
  <Flex alignItems="center">
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

Responsive { }

<Box height="300px" clone>
  <Flex
    alignItems={{
      xs: 'baseline',
      sm: 'center',
      md: 'flex-start',
      lg: 'flex-end',
      xl: 'center',
    }}
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" clone>
  <Flex
    alignItems={{
      xs: 'baseline',
      sm: 'center',
      md: 'flex-start',
      lg: 'flex-end',
      xl: 'center',
    }}
  >
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

Responsive [ ]

<Box height="300px" clone>
  <Flex alignItems={['baseline', 'center', 'flex-start', 'flex-end', 'center']}>
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

<Box height="300px" clone>
  <Flex alignItems={['baseline', 'center', 'flex-start', 'flex-end', 'center']}>
    <Box width="70px" height="70px" bgColor="primaryBase" />
    <Box width="70px" height="70px" bgColor="secondaryBase" />
    <Box width="70px" height="70px" bgColor="tertiaryBase" />
  </Flex>
</Box>

flexDirection

<Flex flexDirection="column-reverse">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex flexDirection="column-reverse">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive { }

<Flex
  flexDirection={{
    xs: 'column-reverse',
    sm: 'row',
    md: 'row-reverse',
    lg: 'column',
    xl: 'column-reverse',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  flexDirection={{
    xs: 'column-reverse',
    sm: 'row',
    md: 'row-reverse',
    lg: 'column',
    xl: 'column-reverse',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive [ ]

<Flex
  flexDirection={[
    'column-reverse',
    'row',
    'row-reverse',
    'column',
    'column-reverse',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  flexDirection={[
    'column-reverse',
    'row',
    'row-reverse',
    'column',
    'column-reverse',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

flexWrap

<Flex flexWrap="column-reverse">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex flexWrap="column-reverse">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive { }

<Flex
  flexWrap={{
    xs: 'column-reverse',
    sm: 'row',
    md: 'row-reverse',
    lg: 'column',
    xl: 'column-reverse',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  flexWrap={{
    xs: 'column-reverse',
    sm: 'row',
    md: 'row-reverse',
    lg: 'column',
    xl: 'column-reverse',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive [ ]

<Flex
  flexWrap={[
    'column-reverse',
    'row',
    'row-reverse',
    'column',
    'column-reverse',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  flexWrap={[
    'column-reverse',
    'row',
    'row-reverse',
    'column',
    'column-reverse',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

justifyContent

<Flex justifyContent="space-between">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex justifyContent="space-between">
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive { }

<Flex
  justifyContent={{
    xs: 'space-around',
    sm: 'space-evenly',
    md: 'flex-end',
    lg: 'center',
    xl: 'space-between',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  justifyContent={{
    xs: 'space-around',
    sm: 'space-evenly',
    md: 'flex-end',
    lg: 'center',
    xl: 'space-between',
  }}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

Responsive [ ]

<Flex
  justifyContent={[
    'space-around',
    'space-evenly',
    'flex-end',
    'center',
    'space-between',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>

<Flex
  justifyContent={[
    'space-around',
    'space-evenly',
    'flex-end',
    'center',
    'space-between',
  ]}
>
  <Box width="70px" height="70px" bgColor="primaryBase" />
  <Box width="70px" height="70px" bgColor="secondaryBase" />
  <Box width="70px" height="70px" bgColor="tertiaryBase" />
</Flex>