Flex

The yoga master of layouts. Flex is a nimble component that lets you easily design fluid, responsive layouts with elements that stretch, shrink, and align with grace. It's all about giving you the ultimate control and flexibility over your content's arrangement.

Example

1  import { Flex, Box } from '@haktos/sugarcoat-ui';
2
3  <Flex gap='3'>
4    <Box css={{ width: '$9', height: '$9', bg: '$primary200' }}></Box>
5    <Box css={{ width: '$8', height: '$8', bg: '$primary200' }}></Box>
6    <Box css={{ width: '$7', height: '$7', bg: '$primary200' }}></Box>
7    <Box css={{ width: '$6', height: '$6', bg: '$primary200' }}></Box>
8  </Flex>
9

API Reference

Component	Description
Flex	The grand architect of layouts. A powerful component that effortlessly arranges your content into a flexible, responsive grid system, making your UI structured and visually balanced.

Component Properties

Flex

Prop	Type	Default	Explanation
`justify`	`string`	start	This determines how your items are spaced horizontally. Whether you like them bunched, evenly spread, or aligned to either side, justify sets the stage.
`items`	`string`	start	Determines how the flex items align vertically within the container. Whether they cozy up to the top, settle in the center, or lounge at the bottom, it’s all under your control.
`content`	`string`	-	When you have wrapped lines in a flex container, this prop is your go-to for controlling the spacing and alignment of those lines.
`direction`	`string`	row	Sets the primary axis of the Flex layout - should your items form a neat row or stand in a single file column? Direction leads the way.
`gap`	`string`	-	Adds a gap between the flex items, ensuring they have their own breathing room without stepping on each other's toes.
`wrap`	`string`	no-wrap	It decides whether your items should stubbornly stay in a single line or graciously wrap into additional lines when there’s not enough room.