Flex

Flex is Box with display set to flex and comes with helpful style shorthand. It renders a div element. Based on Chakras Flex component

Basic usage

To use the Flex component, simply import it from the Casper UI package and use it as a wrapper for your content.

import { Flex } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Flex>
      <div>I am a child of Flex</div>
      <div>I am another child of Flex</div>
    </Flex>
  );
}

⛶

This will create a flex container with two children. By default, the Flex component will align the children along the horizontal axis (left to right) and the vertical axis (top to bottom).

Properties

The Flex component has several (shorthand) properties that allow you to control the layout and alignment of the children.

Usage

Using the Flex components, here are some helpful shorthand props:

• flexDirection is direction
• flexWrap is wrap
• flexBasis is basis
• flexGrow is grow
• flexShrink is shrink
• alignItems is align
• justifyContent is justify

direction

The direction property allows you to control the direction in which the children are laid out. By default, the value is “row”, which means that the children are laid out in a row from left to right.

justify and align

The justify and align properties allow you to control the alignment of the children along the main and cross axis respectively.

wrap

The wrap property allows you to control whether the children should wrap to the next line if the flex container is not wide enough. By default, the value is “wrap”, which means that the children will wrap to the next line if necessary.

gap

The gap property allows you to control the spacing between the children. It accepts a number or a string.

How to center a div

import { Flex } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Flex justify="center" align="center">
      <div>I will be will be centered</div>
    </Flex>
  );
}

⛶

Try it yourself!

import { Flex, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Flex color="white" w="500px" direction="row">
      <Flex p="2" flex="2" bg={ThemeColor.Primary}>
        <div>Box 1</div>
      </Flex>
      <Flex p="2" flex="1" bg={ThemeColor.Secondary}>
        <div>Box 2</div>
      </Flex>
      <Flex p="2" flex="4" bg={ThemeColor.Accent}>
        <div>Box 3</div>
      </Flex>
    </Flex>
  );
}

⛶