Flex

Component abstraction for CSS flexbox.

Props

children

ReactNodeLabel to display

<Box />
<Box />
<Box />

<Box />
<Box />
<Box />

gap

"4" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80"

direction

"row" | "column" | "row-reverse" | "column-reverse"

align

"start" | "center" | "end" | "stretch" | "baseline"

justify

"start" | "center" | "end" | "between"

wrap

"wrap" | "wrap-reverse" | "no-wrap"

import * as React from "react";
import { Flex } from "basics";

export default () => {
  return (
    <Flex gap="8">
      <Box />
      <Box />
      <Box />
    </Flex>
  );
}

import * as React from "react";
import { Flex } from "basics";

export default () => {
  return (
    <Flex gap="8">
      <Box />
      <Box />
      <Box />
    </Flex>
  );
}