Skip to Content
StylingAlign Self

Align Self

Use alignSelf prop to control how individual flex items are aligned on the cross axis.

Name

Styles

center
end
normal
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({
  alignSelf = "center",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "alignSelf">) {
  return (
    <Canvas asChild striped>
      <Flex flexDirection="row" h="224">
        <Box flex="1" p="64">
          01
        </Box>
        <Box alignSelf={alignSelf} flex="1" p="32">
          02
        </Box>
        <Box flex="1" p="64">
          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" h="224">
        <Box flex="1" p="64">
          01
        </Box>
        <Box alignSelf={["stretch", "center"]} flex="1" p="32">
          02
        </Box>
        <Box flex="1" p="64">
          03
        </Box>
      </Flex>
    </Canvas>
  );
}
Last updated on
Align ItemsDisplay