Skip to Content
StylingJustify Content

Justify Content

Use justifyContent prop to control how flex items are aligned on the main axis.

Name

Styles

center
end
flex-end
flex-start
normal
space-around
space-between
space-evenly
start
stretch

#

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({
  justifyContent = "flex-start",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "justifyContent">) {
  return (
    <Canvas asChild striped>
      <Flex flexDirection="row" justifyContent={justifyContent}>
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
      </Flex>
    </Canvas>
  );
}

#

Responsive

"use client";
 
import { Canvas } from "@/demos/Canvas";
import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild striped>
      <Flex flexDirection="row" justifyContent={["center", "flex-end"]}>
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
      </Flex>
    </Canvas>
  );
}
Last updated on
Grid ColumnMargin