Flex

Used to manage flex layouts

Usage

import { Flex, Spacer } from "chakra-ui-solid";

<Flex>
  <div />
  <div />
</Flex>

Examples

Direction

Use the direction or flexDirection prop to change the direction of the flex

Align

Use the align or alignItems prop to align the children along the cross axis.

Justify

Use the justify or justifyContent prop to align the children along the main axis.

flex-start

center

flex-end

space-between

Order

Use the order prop to change the order of the children.

Auto Margin

Apply margin to a flex item to push it away from its siblings.

Spacer

Use the Spacer component to create flexible space between flex items. It will expand to fill all available space, pushing items to opposite ends.

Box 1

Box 2

Wrap

Use the wrap or flexWrap prop to wrap the children when they overflow the parent.

Props

FlexProps
Prop	Default	Type
`inline`	—	`boolean` Lay the children out inline, as `inline-flex` rather than `flex`.

Plus everything in FlexProperties, Omit<HTMLChakraProps<"div">, "direction"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

The five shorthands above are Panda’s own flex pattern, reused rather than reimplemented. That is what makes <Flex direction="row"> in your source and the class this library computes the same class: Panda’s pattern claims the JSX name Flex, so your build maps the prop through the same code the component calls.