Flex Direction

Atomic props for controlling the direction of flex items.

Atomic Props	CSS Properties
row	flex-direction: row;
column	flex-direction: column;
flexDirection={value}	flex-direction: {value}

row

Use row props to position flex items horizontally.

Result

Loading...

Live Editor

<Box white gap3 row> <Box bgOrange400 p10> A </Box> <Box bgOrange400 p10> B </Box> <Box bgOrange400 p10> C </Box> </Box>

<Box white gap3 row>
  <Box bgOrange400 p10>
    A
  </Box>
  <Box bgOrange400 p10>
    B
  </Box>
  <Box bgOrange400 p10>
    C
  </Box>
</Box>

column

Use column props to position flex items vertically.

Result

Loading...

Live Editor

<Box white gap3 column> <Box bgOrange400 p6> A </Box> <Box bgOrange400 p6> B </Box> <Box bgOrange400 p6> C </Box> </Box>

<Box white gap3 column>
  <Box bgOrange400 p6>
    A
  </Box>
  <Box bgOrange400 p6>
    B
  </Box>
  <Box bgOrange400 p6>
    C
  </Box>
</Box>

flexDirection

Use flexDirection={value} to set items direction.

Result

Loading...

Live Editor

<Box white flex flexDirection="row-reverse"> <Box bgOrange400 p6 m3> A </Box> <Box bgOrange400 p6 m3> B </Box> <Box bgOrange400 p6 m3> C </Box> </Box>

<Box white flex flexDirection="row-reverse">
  <Box bgOrange400 p6 m3>
    A
  </Box>
  <Box bgOrange400 p6 m3>
    B
  </Box>
  <Box bgOrange400 p6 m3>
    C
  </Box>
</Box>