Flex

Used to manage flex layouts

Source: packages/chakra-ui-solid/src/components/flexChakra UI ↗

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexBasic() {
  return (
    <Flex gap="4">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  );
}

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

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithDirection() {
  return (
    <Flex gap="4" direction="column">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  );
}

Align

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

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithAlign() {
  return (
    <Flex gap="4" align="center">
      <DecorativeBox height="4" />
      <DecorativeBox height="8" />
      <DecorativeBox height="10" />
    </Flex>
  );
}

Justify

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

flex-start

center

flex-end

space-between

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithJustify() {
  return (
    <Flex direction="column" gap="8">
      <Flex gap="4" justify="flex-start">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-start
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="center">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          center
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="flex-end">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-end
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="space-between">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          space-between
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>
    </Flex>
  );
}

Order

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

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithOrder() {
  return (
    <Flex gap="4">
      <DecorativeBox height="10" order="1">
        1
      </DecorativeBox>
      <DecorativeBox height="10" order="3">
        2
      </DecorativeBox>
      <DecorativeBox height="10" order="2">
        3
      </DecorativeBox>
    </Flex>
  );
}

Auto Margin

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

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithAutoMargin() {
  return (
    <Flex gap="4" justify="space-between">
      <DecorativeBox height="10" width="40" />
      <DecorativeBox height="10" width="40" marginEnd="auto" />
      <DecorativeBox height="10" width="40" />
    </Flex>
  );
}

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

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

export default function FlexWithSpacer() {
  return (
    <Flex>
      <Box p="4" bg="red.subtle" color="red.fg">
        Box 1
      </Box>
      <Spacer />
      <Box p="4" bg="green.subtle" color="green.fg">
        Box 2
      </Box>
    </Flex>
  );
}

Wrap

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

import { Flex } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function FlexWithWrap() {
  return (
    <Flex gap="4" wrap="wrap" maxW="500px">
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
    </Flex>
  );
}

Props

Prop	Default	Type
`inline`	—	`boolean` Lay the children out inline, as `inline-flex` rather than `flex`.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: Omit<HTMLChakraProps<"div">, "direction">. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

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.