Flex Wrap
Use flexWrap
prop to control how flex items wrap.
Name | Styles |
---|---|
nowrap | |
wrap |
#
Documentation
#
#
Usage
#
01
02
03
"use client";
import type { ComponentPropsWithoutRef } from "react";
import { Canvas } from "@/demos/Canvas";
import { Box, Flex } from "@optiaxiom/react";
export function App({
flexWrap = "nowrap",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "flexWrap">) {
return (
<Canvas asChild>
<Flex flexDirection="row" flexWrap={flexWrap} w="auto">
<Box flex="none" w="224">
01
</Box>
<Box flex="none" w="224">
02
</Box>
<Box flex="none" w="224">
03
</Box>
</Flex>
</Canvas>
);
}
#
Responsive
#
"use client";
import { Canvas } from "@/demos/Canvas";
import { Box, Flex } from "@optiaxiom/react";
export function App() {
return (
<Canvas asChild>
<Flex flexDirection="row" flexWrap={["wrap", "nowrap"]} w="auto">
<Box flex="none" w="224">
01
</Box>
<Box flex="none" w="224">
02
</Box>
<Box flex="none" w="224">
03
</Box>
</Flex>
</Canvas>
);
}
Last updated on