Flex

The Flex package contains a useful set of components relevant for layout work. It has helper components to create flex.

import Flex from "@ds-kit/flex"
import Div from "@ds-kit/div"

Simple Example

The simplest example of a flex will look like this:

First div
Second div
Third div
<Flex>
  <Div bg="primary" color="white" p="3rem" mx="1rem">
    First div
  </Div>
  <Div bg="primary" color="white" p="3rem" mx="1rem">
    Second div
  </Div>
  <Div bg="primary" color="white" p="3rem" mx="1rem">
    Third div
  </Div>
</Flex>

Flex props

Name
Type
Default
display
"flex"
flexWrap
"wrap"