如何在Flexbox元素中对齐垂直文本章节标题？

我一直在尝试为网站的每个区块创建垂直文本章节标题，但难以将其与其他组件对齐。我将标题和内容作为Flexbox中的两个元素，希望将标题放置在其Flex元素的右上角，但不知如何实现。我听说origin-DIRECTION CSS类能解决该问题，但尝试后发现它仅会导致文本在Flexbox中错位，有时还会穿透其他组件。

问题截图：（背景设为绿色便于查看）

App组件代码：

<div className="flex my-[35vh]">
    <SectionCard name={"Projects"} />
    <Projects />
</div>

SectionCard组件代码：

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
    return (
        <div className="flex font-metropolis font-bold text-3xl items-center gap-8 -rotate-90">
            <div className="bg-black h-2 w-[10rem]"></div>
            <p>
                {name}  
            </p>
        </div>
    );
}

问题根源 #

直接旋转整个Flex容器会导致元素的布局占位尺寸未改变（还是旋转前的水平尺寸），从而打乱Flex布局的对齐逻辑，同时旋转基点默认是元素中心，容易出现错位和穿透问题。

解决方案 #

方法1：使用writing-mode实现垂直文本（推荐） #

不需要旋转，直接通过CSS属性让文本垂直排列，布局更稳定：

修改SectionCard组件：

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
    return (
        <div className="font-metropolis font-bold text-3xl flex flex-col items-end justify-center pr-4">
            {/* 横线放在标题上方，垂直排列 */}
            <div className="bg-black w-2 h-[10rem] mb-4"></div>
            <p className="writing-mode vertical-rl">
                {name}
            </p>
        </div>
    );
}

同时给App的Flex容器添加对齐方式，让SectionCard靠顶部对齐：

<div className="flex my-[35vh] items-start">
    <SectionCard name={"Projects"} />
    <Projects />
</div>

方法2：调整旋转基点与定位 #

如果坚持用旋转，需要修改旋转基点并调整容器布局：

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
    return (
        <div className="relative w-20 h-[300px] font-metropolis font-bold text-3xl">
            {/* 横线 */}
            <div className="absolute top-0 right-0 bg-black h-[10rem] w-2"></div>
            {/* 标题旋转后定位到右上角 */}
            <p className="absolute top-0 right-8 -rotate-90 transform-origin top-right">
                {name}
            </p>
        </div>
    );
}

• 设置容器为relative，内部元素用absolute定位
• 用transform-origin: top-right把旋转基点设为标题的右上角
• 给容器设置固定宽高，避免影响Flex布局

关键说明 #

• 避免旋转整个Flex容器，尽量只旋转文本元素
• 使用transform-origin精准控制旋转的基准点
• 若采用writing-mode，现代主流浏览器均支持该属性

内容的提问来源于stack exchange，提问作者DaBaby