Flex

Description

A component that abstracts flexbox functionality. All valid flex-box dependent rules are implemented as props.

Demo

import { Flex } from "@neui/layout";

Live Editor

<Flex gap={20} flexDirection={{ base: "column", md: "row" }}> <DemoBox /> <DemoBox /> </Flex>

<Flex gap={20} flexDirection={{ base: "column", md: "row" }}>
  <DemoBox />
  <DemoBox />
</Flex>

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Box		Box

Name	CSS Rule(s)	Description
alignItems	align-items	Sets the component's align-items
justifyContent	justify-content	Sets the component's justify-content
alignItems	align-items	Sets the component's align-items
justifyContent	justify-content	Sets the component's justify-content
flexWrap	flex-wrap	Sets the component's flex-wrap
flexDirection	flex-direction	Sets the component's flex-direction
flexBasis	flex-basis	Sets the component's flex-basis
flexGrow	flex-grow	Sets the component's flex-grow
flexShrink	flex-shrink	Sets the component's flex-shrink