我一直試圖在我的網站上為每個部分創建垂直文本部分標題，但我一直很難將它們與其他組件對齊。我將標題和內容作為flex框中的兩個元素。我想把標題放在flex元素的右上角，但我不知道如何實際做到這一點。

我聽說origin-DIRECTION css類可以幫助解決這個問題，但是當我嘗試使用它時，它所做的只是將文本扔在flex框周圍，有時它會夾住其他組件。

問題的圖像；將背景設為綠色以增加可見度。

下面是我的應用程序組件中的代碼。

<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>
    );
}

1.使用flex box

您應該使用justify-content: end并刪除項目中心類

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

}

2.使用位置規則

只需刪除內部flex和一些位置css規則，如絕對和相對來實現這一點。

我剛剛刪除了類彈性項目-中心差距-8

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
return (
    <div className="font-metropolis font-bold text-3xl -rotate-90" style={{"position":"relative"}}>
        <div className="bg-black h-2 w-[10rem]" style={{"position":"absolute","top":"0","right":"0","padding":"10px"></div>
        <p>
            {name}  
        </p>
    </div>
   );
}