Usage
import { Flex } from "lambda-ui-components";
export default function App() {
return (
<Flex gap="10px" justify="center" align="center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Flex>
);
}Flex
Flex component is a layout container that allows you to arrange items in rows or columns.
Playground
Experiment with all the properties of the Flex component in real time.
Properties
direction
Direction of the flex items.
justify
Alignment along the main axis.
align
Alignment along the cross axis.
wrap
Whether flex items are forced onto one line or can wrap onto multiple lines.
gap
Gap between flex items.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
API Reference
Props
Prop | Default | Type |
|---|---|---|
direction | "row" | "row" | "row-reverse" | "column" | "column-reverse" |
justify | "flex-start" | "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly" |
align | "flex-start" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" |
wrap | "nowrap" | "nowrap" | "wrap" | "wrap-reverse" |
gap | 0 | string | number |
children | undefined | ReactNode |