Css Flexbox文本的垂直对齐和旋转

我想在左侧或右侧标记一个部分。每个部分的标签应垂直居中并旋转90度

我试图用flexbox存档，但标签文本总是向右流动，这取决于标签的文本长度。

---

我不知道如何解决这个问题。

问题是转换后的元素在布局中占据相同的位置，就像未转换一样。因此，您必须使用绝对定位来修复它。演示：

部分{
位置：相对位置；
/*将内容移动到标签宽度+一些偏移*/
左侧填充：35px；
/*只是演示的样式*/
背景色：#E0；
高度：100px；
}
.标签包装{
/*绝对定位元素*/
位置：绝对位置；
排名：0；
左：0；
底部：0；
/*设置内容高度+某些偏移*/
宽度：30px；
/*成为一个灵活的容器*/
/*其子项将是弹性项*/
显示器：flex；
/*将弹性项目垂直居中*/
对齐项目：居中；
/*水平居中调整项目*/
证明内容：中心；
/*只是演示的风格*/
背景色：#A0；
}
.标签{
/*旋转文本*/
变换：旋转（-90度）；
}

自闭症
这就是内容

我使用嵌套的flexbox进行对齐

部分{
显示器：flex；
高度：10公分；
边框：薄实线；
}
.节：非（：最后一个孩子）{
边缘底部：0.5em；
}
.标签{
宽度：3em；
背景：暗射线；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标签p{
变换：旋转（270度）；
}
.内容{
填充：0.5em；
}

标签

乱数假文
ASDLKFDFDDASDLFASD

乱数假文