Chakra-UI

I♥️Components

Flexbox

|

Chakra Docs

|

⦾ Chakra UI, the Flex component is a Box component (the most basic and versatile component in Chakra UI, a simple styled div) with display: flex by default. This makes it easy to apply common flexbox properties to layout your components. Here's a rundown:
  • Flex Direction: The direction prop corresponds to the flex-direction CSS property, which defines the direction of the flex items in the flex container. It accepts values like row, column, row-reverse, and column-reverse.
  • Justify Content: The justify prop is a shorthand for the CSS justify-content property. It defines how the browser distributes space between and around content items along the main-axis of a flex container. It accepts standard CSS justify-content values likeflex-start, flex-end, center, space-between, space-around,space-evenly.
  • Align Items: The align prop is short for align-items. It defines the default behavior for how flex items are laid out along the cross-axis on the current line. It accepts values like stretch, flex-start, flex-end, center, and baseline.
  • Wrap: The wrap prop is short for flex-wrap. It controls whether the flex container is single-lined or multi-lined, and the direction of the cross-axis, which determines the direction new lines are stacked in. It accepts values like nowrap, wrap,wrap-reverse .
  • Responsive Design: All of these props can accept responsive array values or object values to apply different styles at different breakpoints.
  • Flex Children (Flex Items): You can also control the flex properties of child elements using Chakra UI props. For example, you can use the flexGrow, flexShrink, and flexBasis props on children of a Flex component to control how they flex.
  • Flex shorthand: The flex prop provides a shorthand to specify the flexGrow, flexShrink, and flexBasis properties simultaneously. For instance, flex="1" would be equivalent to setting flexGrow={1}, flexShrink={1}, flexBasis="0%".
  • Other Box Props: Since Flex is a Box, you can use all the Box props for spacing, color, typography, and more, in addition to the flex-specific props.

The Flex component in Chakra UI is a powerful tool to achieve complex layouts while keeping the markup simple and clean.

To import the Flex component:

Examples

Very centered, indeed!

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

Child One

Child Two

Child Three

On mobile and smaller screens, this will be column-wrap. At medium sized screens and above, this will switch to row-wrap.

Child One
Child Two
Child Three

Did you know?

Creative Idea No. 1

You can create equal height columns using Flexbox in Chakra UI. By applying the flex=1 prop to each column, the available space is distributed equally among them, resulting in columns with equal height.
1
2
3

Code

Creative Idea No. 2

Flexbox in Chakra UI enables you to effortlessly create responsive layouts using the Wrap component. The Wrapcomponent utilizes the power of Flexbox to wrap flex items onto multiple lines, ensuring a visually appealing and responsive design. In this example, the Wrap component leverages the power ofFlexbox to create a responsive grid or wrap elements within a container.
The spacing=1 prop sets the spacing between the wrapped items. Each WrapItem component represents an individual item within the Wrap component. The WrapItem ensures that each item is wrapped correctly and contributes to the responsive behavior. Each item is a Box component with a specified background color (bg) and dimensions (height and width).
Flexbox comes into play as the Wrap component arranges the items in a row by default. However, when the available space is insufficient to fit all the items in a single row, Flexbox automatically wraps them onto the next line while maintaining their order. This ensures that the items are displayed neatly in a responsive manner, adapting to different screen sizes and orientations. By using Flexbox through the Wrap component, Chakra UI simplifies the process of creating responsive grids or wrapping elements within a container. This flexibility enhances the overall responsiveness and aesthetics of your UI.

Code

Creative Idea No. 3

Flexbox in Chakra UI allows you to achieve vertical center alignment effortlessly. By using the align="center" prop on the Flex container, the flex items are vertically centered within the container, regardless of their individual heights.
Item 1
Item 2
Item 3

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.