title: "Flex" slug: "/packages/flex" category: "layout" componentNames:

• "Flex"

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:

<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>