Chakra-UI

I♥️Components

Flex

|

Chakra Docs

|

⦾ The Chakra UI Flex component is a powerful tool that extends the functionality of the Box component by setting its display property to flex. It allows you to create flexible and responsive layouts using flexbox, offering convenient shorthand props for various flex-related styles. The Flex component serves as a wrapper for its child elements, allowing you to control the layout and positioning of these elements within a flex container.

One of the key advantages of using the Flex component is its extensive set of shorthand props, which simplify the process of applying common flexbox styles.

  • flexDirection: (shorthand: direction): The flexDirection prop determines the direction of the flex items within the Flex container. It accepts values like "row", "column", "row-reverse", and "column-reverse". For example, setting flexDirection="row" aligns the flex items horizontally in a row, while flexDirection="column" stacks them vertically.
  • flexWrap: (shorthand: wrap): The flexWrap prop controls the wrapping behavior of flex items when they exceed the width of the Flex container. It accepts values like "nowrap", "wrap", and "wrap-reverse". By default, flex items don't wrap onto multiple lines ("nowrap"), but setting flexWrap="wrap" allows them to wrap to the next line when necessary.
  • flexBasis: (shorthand: basis): The flexBasis prop sets the initial size of flex items along the main axis before any available space is distributed. It specifies the default width (for flexDirection="row") or height (for flexDirection="column") of the flex items. The value can be a fixed pixel value (e.g., flexBasis="200px") or a relative value (e.g., flexBasis="50%").
  • flexGrow: (shorthand: grow): The flexGrow prop determines the ability of flex items to grow and occupy any available space along the main axis. It accepts a numeric value that represents the relative proportion of available space that each flex item should take up. For example, if one flex item has flexGrow=1 and another has flexGrow=2, the second item will take up twice as much space as the first item.
  • flexShrink: (shorthand: shrink): The flexShrink prop controls the ability of flex items to shrink when the Flex container's width is insufficient to accommodate all the items. It accepts a numeric value that determines the relative shrinkage factor of each flex item. By default, flex items have flexShrink=1, meaning they will shrink proportionally. Setting flexShrink=0 prevents the item from shrinking.
  • alignItems: (shorthand: align): The alignItems prop aligns the flex items along the cross-axis (perpendicular to the main axis). It accepts values like "flex-start", "flex-end", "center", "baseline", and "stretch". For example, settingalignItems="center" centers the flex items vertically (if flexDirection="row") or horizontally (if flexDirection="column").
  • justifyContent: (shorthand: justify): The justifyContent prop controls the alignment of flex items along the main axis. It accepts values like "flex-start", "flex-end", "center", "space-between", "space-around", and "space-evenly". For example, setting justifyContent="space-between" evenly distributes the flex items along the main axis, leaving equal space between each item.

While you can use the verbose props, Chakra UI provides shorthand equivalents for these flex styles, saving you time and reducing code complexity. The Flex component, along with its shorthand props, empowers you to create dynamic and responsive layouts without sacrificing ease of use.

⦾ Spacer: The Spacer component, imported as Spacer, complements the Flex component by creating adjustable empty space within a Flex container. It enables you to fine-tune the spacing between child elements. By utilizing the Spacer component, you can easily create responsive and evenly spaced layouts. The Spacer component renders as a div and can be used to add space between Flex child elements without needing to add explicit margins or padding.

These components work seamlessly together. By combining the Flex and Spacer components, you can create stackable layouts, control spacing between elements, and build responsive designs. The Flex component provides the structure and flexibility, while the Spacer component allows for precise control over the spacing within the Flex container.

These components can be imported as follows:

Examples

Flex Basics

⦾ In this example, you can experiment with four of the most fundamentally important aspects of Flex that you will need to understand in order to use it effectively. The best way to learn these is to experiment with them, so please feel free to play around with the values in the controls below.

Parent Container Values:

height=flexDirection=justifyContent=alignItems=
CHILD 1
CHILD 2
CHILD 3

Code

Flex Grow and Shrink

⦾ This example is designed to showcase the concepts of flexGrow and flexShrink in the context of a the Flex component. It allows users to experiment with different values for these properties and observe how they affect the sizing and behavior of the flex items.

The component consists of a Flex container with three child Square components. Each child square represents a flex item and is accompanied by two select menus: one for flexGrow and one for flexShrink. Users can select different values for these properties for each child square using the select menus.

Additionally, the component provides options to customize the width of the parent Flex container using a select menu. This allows users to observe how the flex items respond to changes in the size of the parent container.

(parent) width=

Child 1

grow=
shrink=

Child 2

grow=
shrink=

Child 3

grow=
shrink=
CHILD 1
CHILD 2
CHILD 3

Code

FlexWrap

⦾ The flex-wrap property is used in flexbox to control how flex items are wrapped and displayed when they exceed the available space within the flex container. It allows you to control whether the items should wrap onto multiple lines or stay on a single line.

The flex-wrap property provides three possible values:

  • nowrap: This is the default value where items do not wrap and try to fit within a single line, potentially causing overflow.
  • wrap: Items wrap onto multiple lines if necessary to fit within the container. The wrapping occurs in the direction specified by the flex-direction property.
  • wrap-reverse: Items wrap onto multiple lines in the opposite direction of the flex-direction property. This means they wrap from bottom to top or right to left.

In this example, you can explore the flexWrap property of the Chakra Flex component and its impact on the layout of flex items. You can change the flexWrap value using the select input and observe how the flex items wrap or remain on a single line.

flexWrap=flexDirection=
1
2
3
4
5
6

Code

FlexBasis

⦾ The flex-basis property is used in flexbox to define the initial size of a flex item along the main axis before any available space is distributed among the flex items. It specifies the default size of an item before any remaining space is distributed according to the flex-grow and flex-shrink properties.

By default, the flex-basis value is set to auto, which means that the size of the item is determined by its content or the width property if specified. However, you can explicitly set the flex-basis value to a specific length or percentage to control the initial size of the flex items.

In the example below, you can interactively change the flexBasis value of each flex item using the w (width) property in Chakra UI. The flex items are arranged in a flex container with flex-wrap: wrap to allow items to wrap onto multiple lines when necessary. You can observe how changing the flex-basis value affects the size and layout of the flex items.

Box 1: flexBasis=
Box 2: flexBasis=
Box 3: flexBasis=
Box 4: flexBasis=
Box 5: flexBasis=
Box 6: flexBasis=
1
2
3
4
5
6

Code

Spacers

⦾ This example provides an interactive way of using spacers within a flex layout. It allows users to dynamically adjust the number of boxes displayed and observe the effect of spacers in creating flexible and responsive layouts.

In general, the Flex component serves as the container for the layout, allowing its child elements to be arranged horizontally or vertically based on the specified flexDirection. It provides a flexible container that automatically adjusts the size and position of its children based on the available space.

On the other hand, the Spacer component is used to create empty space within the flex container. It acts as a flexible and expandable element that fills the remaining space between its adjacent siblings. The Spacer component automatically adjusts its size to distribute the available space evenly among the other child elements.

By combining the Flex and Spacer components, you can achieve various layouts with flexible spacing between the child elements. The Spacer component expands or contracts based on the available space, pushing the other elements apart or pulling them closer together, creating a responsive and adaptive design.

For example, if you have multiple boxes within a Flex container and place Spacer components between them, the spacers will distribute the available space evenly, creating equal spacing between the boxes. As the container's width or height changes, the spacers adjust their size to maintain the consistent spacing between the boxes.

Boxes (w/Spacers):

Row

Column

Box 1
Box 2
Box 3

Code

Comparison: Flex, Grid, and Stack

⦾ Now let's look at an overview of these layout components, how they work, some many points to consider, and how to choose between them for different implementations.
Flex and Spacer: Use Flex and Spacer when you want the children to span the entire width or height of the container, and have equal spacing between them.
  • The Flex component in Chakra UI is a powerful container that uses flexbox to create flexible layouts.
  • It allows you to arrange its children in a horizontal or vertical direction, based on the flexDirection prop.
  • The children of the Flex component will automatically stretch to fill the available space, ensuring they span the entire width or height of the container.
  • By default, the Flex component evenly distributes the available space among its children, allowing them to have equal spacing between them.
  • However, to achieve equal spacing between children, the Spacer component is often used in conjunction with Flex.
  • The Spacer component is a utility component that takes up available space within the Flex container, creating equal spacing between its adjacent children.
  • By placing a Spacer component between each child, you can ensure that the children have equal spacing and span the entire width or height of the Flex container.
Grid: Use Grid when you need a more complex grid-based layout with control over cell placement and column/row sizes.
  • The Grid component in Chakra UI is a powerful container for creating grid-based layouts. It uses CSS Grid to define a grid of cells and allows you to place its children in specific grid areas using the gridArea prop.
  • Unlike Flex, the Grid component does not automatically stretch its children to fill the available space.
  • The starting points of the children in Grid will be equally spaced based on the grid layout defined, but the gaps between them may not be equal.
  • Grid is useful when you need to create more complex grid layouts with specific cell placement and control over column and row sizes.
Stack: Use Stack when you want to stack children either vertically or horizontally and provide consistent spacing between them without the need for spacer components.
  • The Stack component in Chakra UI is a versatile layout component that arranges its children in a stack, either vertically or horizontally, based on the direction prop.
  • By default, Stack arranges its children vertically, stacking them on top of each other in a column-like structure.
  • It automatically applies equal spacing between its children using margin, resulting in consistent vertical spacing.
  • You can also change the direction to horizontal by setting the direction prop to "row". This arranges the children side by side in a row-like structure.
  • Stack provides a convenient way to create vertical or horizontal layouts with consistent spacing between children, without the need for additional spacer components.
  • You can customize the spacing between children using the spacing prop, which accepts spacing values defined in Chakra UI's theme.
HStack: Use HStack when you want to align elements horizontally and provide consistent spacing between them.
  • The HStack component in Chakra UI is a layout component that arranges its children in a horizontal stack.
  • It automatically places its children next to each other horizontally and applies equal spacing between them.
  • HStack is useful when you want to align multiple elements horizontally and provide consistent spacing between them.
  • By default, HStack does not make the children span the entire width of the container. Instead, they take up only the necessary space based on their content size.
  • You can customize the alignment of the children using the align prop, which accepts values like "center", "flex-start", or "flex-end".
  • HStack is great for creating horizontal navigation menus, button groups, or any layout that requires aligning elements horizontally.
VStack: Use VStack when you want to align elements vertically and provide consistent spacing between them.
  • The VStack component in Chakra UI is a layout component that arranges its children in a vertical stack.
  • It automatically stacks its children on top of each other vertically and applies equal spacing between them.
  • VStack is useful when you want to align multiple elements vertically and provide consistent spacing between them.
  • By default, VStack does not make the children span the entire height of the container. Instead, they take up only the necessary space based on their content size.
  • You can customize the alignment of the children using the align prop, which accepts values like "center", "flex-start", or "flex-end".
  • VStack is great for creating vertical navigation menus, lists, or any layout that requires aligning elements vertically.

Did you know?

Creative Idea No. 1

Dynamic Form Layout: You can use Flex to create dynamic and responsive form layouts, building forms that adapt to different screen sizes and reorganize their fields automatically. This example offers a simple registration form with two columns on larger screens, which transforms into a single column on smaller screens.

Code

Creative Idea No. 2

Flexible Image Layout: Flex is great for making responsive and attractive image layout designs that adapt to all screen sizes and the layout shifts that occur with responsive designs. Keeping a consistently attractive layout with complex content would be almost impossible without flexbox functionality. And with Chakra's versatile, Flex component, it becomes easy once you know the basics.
Image 1Image 2Image 3

Code

Creative Idea No. 3

Flex Nav Menu: Flex is an essential tool for creating navigation menus due to its ability to handle various layout requirements with ease. With the direction property, we can easily switch between vertical and horizontal orientations, allowing us to create both types of navigation menu. Flex enables us to control the alignment and spacing of menu items effortlessly. We can use properties like justifyContent and alignItems to position the menu items precisely where we want them, whether it's aligning them in a row or stacking them in a column.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.