Flex

The flex component serves as a wrapper component which brings most of the responsive flexbox utilities.

Responsive variations also exist for all of the flexbox main properties. Those properties will have the following shape:

type WithBreakpoint<T> = {
  xxs?: T;
  xs?: T;
  sm?: T;
  md?: T;
  lg?: T;
  xlg?: T;
  fallback?: T;
};

type ResponsivePropType<T> = T | Partial<WithBreakpoint<T>>;

type Prop<PropValue> = ResponsivePropType<PropValue>;

Direction

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Main-Axis Alignment

Use mainAxisAlignment prop to change the alignment of flex items on the main axis (the x-axis when direction={"row" | "row-reverse"}, y-axis when direction={"column" | "column-reverse"}).

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Cross-Axis Alignment

Use crossAxisAlignment prop to change the alignment of flex items on the cross axis (the y-axis when direction={"row" | "row-reverse"}, x-axis when direction={"column" | "column-reverse"}).

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Align Content

Use contentAlignment prop to align flex items together on the cross axis (the y-axis when direction={"row" | "row-reverse"}, x-axis when direction={"column" | "column-reverse"}).

This property has no effect on single rows of flex items.

Flex item

import Flex from "@sonnat/ui/Flex";
import * as React from "react";

const Demo = () => {
  return (
    <React.Fragment>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="start"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="end"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="center"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="between"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="around"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="evenly"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
      <Flex
        wrap="wrap"
        mainAxisAlignment="start"
        contentAlignment="stretch"
      >
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </Flex>
    </React.Fragment>
  );
};

export default Demo;

Wrapping

Use wrap prop to change the wrapping behavior of flex items in the flexbox.

Flex item

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex Item Self Alignment

Use crossAxisSelfAlignment prop on FlexItem to change the alignment of that specific item on the cross axis (the y-axis when direction={"row" | "row-reverse"}, x-axis when direction={"column" | "column-reverse"}).

Flex item

Self-aligned item

Flex item

Self-aligned item

Flex item

Self-aligned item

Flex item

Self-aligned item

Flex item

Self-aligned item

Flex item

Flex Item Force Fill

Use fill prop on FlexItems to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nihil ut, sint quaerat quam consequatur cumque cum totam voluptates eum fugit beatae porro at doloremque numquam maxime sequi suscipit ea.

Flex item

API

Learn more about the properties and the customization points.

Usage

import Flex, { value FlexItem } from "@sonnat/ui/Flex";

//or
import { value Flex, value FlexItem } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Flex Properties

Flex Properties
Name	Type	Default	Description
children	node	-	The content of the container.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
as	elementType	"div"	The component used for the root node. Either a string to use a HTML element or a component.
variant	ResponsivePropType<"block" \| "inline">	"block"	The variant of the flexbox.
wrap	ResponsivePropType<"nowrap" \| "wrap" \| "wrap-reverse">	"nowrap"	Changes how flex items wrap in the flexbox.
direction	ResponsivePropType<"row" \| "column" \| "row-reverse" \| "column-reverse">	"row"	Sets the direction of flex items in the flexbox.
mainAxisAlignment	ResponsivePropType<"start" \| "end" \| "center" \| "between" \| "around" \| "evenly">	"start"	Changes the alignment of flex items on the main axis in the flexbox.
crossAxisAlignment	ResponsivePropType<"start" \| "end" \| "center" \| "baseline" \| "stretch">	"stretch"	Changes the alignment of flex items on the cross axis in the flexbox.
contentAlignment	ResponsivePropType<""start" \| "end" \| "center" \| "between" \| "around" \| "evenly" \| "stretch">	"start"	Aligns flex items together on the cross axis in the flexbox. (Note: This property has no effect on single rows of flex items.)
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

FlexItem Properties

FlexItem Properties
Name	Type	Default	Description
children	node	-	The content of the container.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
as	elementType	"div"	The component used for the root node. Either a string to use a HTML element or a component.
fill	boolean	false	Use it on a series of sibling flex items to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
mainAxisSelfAlignment	ResponsivePropType<"start" \| "end" \| "center" \| "between" \| "around" \| "evenly">	"start"	Changes the alignment of flex item individually on the main axis in the flexbox.
crossAxisAlignment	ResponsivePropType<"start" \| "end" \| "center" \| "baseline" \| "stretch">	"stretch"	Changes the alignment of flex item individually on the cross axis in the flexbox.
autoMarginStart	ResponsivePropType<boolean>	false	Pushes the flex items on the left side to the left.
autoMarginEnd	ResponsivePropType<boolean>	false	Pushes the flex items on the right side to the right.
autoMarginTop	ResponsivePropType<boolean>	false	Pushes the above flex items to the top.
autoMarginBottom	ResponsivePropType<boolean>	false	Pushes the bottom flex items to the bottom.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.