FlexBox

The yoga master of layouts. FlexBox 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 FlexBoxibility over your content's arrangement.

Example

1  import { FlexBox, Box } from '@sugarcoat/ui';
2
3  <FlexBox gap='3'>
4    <Box css={{ width: '9', height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
5    <Box css={{ width: '8', height: '8' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
6    <Box css={{ width: '7', height: '7' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
7    <Box css={{ width: '6', height: '6' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
8  </FlexBox>
9

API Reference

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

Component Properties

FlexBox

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 FlexBox 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 FlexBox 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 FlexBox 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 FlexBox 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.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius