Html CSS旋转90*垂直文本选项卡赢得'；t中心-使用Flexbox

我正在尝试将两个选项卡居中，并占据垂直高度的一半。知道怎么做吗？

如果您注意到，似乎持有“Tab 1”和“Tab 2”的div没有占据整个宽度，但我使用了

高度：100%

，这并不能解决问题。我还为“Tab 1”和“Tab 2”添加了

高度：50%

，但这会导致每个选项卡占据页面高度的50%。当我使用

height:25%

时，它几乎可以工作，但高度超出了页面

反应JS文件：

return (
    <div className='flexbox-parent-console overflow-hidden'>
        <div className='b--light-gray bw2 b--solid w275p bg-white pa2 overflow-auto'>
            <SocialPostExamplesArray />
        </div>
        <div className='flex-column bg-gray w25p content-around self-center'>
            <div className='post-side-tab-chosen vertical-lr'>Tab 1</div>
            <div className='post-side-tab vertical-lr'>Tab 2</div>
        </div>
    </div>
)

非必需品

.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}

---

我使用了您先前问题的片段，并在其中添加了两个选项卡。 在CSS方面，我使垂直lr容器也成为一个flex box

/*更新*/
.已选择“柱侧”选项卡{
弹性：1；
背景：灰色；
填充：1em 0；
}
.柱侧标签{
弹性：1；
背景：番茄；
填充：1em 0；
}
/*结束更新*/
.垂直lr{
-webkit写作模式：垂直lr；
/*老温野生动物园*/
书写方式：垂直lr；
写入方式：tb-lr；
/*实际上
写作模式：侧边lr；将是唯一的，但并非随处可见。因此，让我们进行转换*/
变换：比例（-1，-1）；
背景：绿色；
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
字体大小：粗体；
字体变体：小大写字母；
}
.flex{
显示器：flex；
}
/*你是说这个吗*/
* {
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
填充：0.5em；
}
.填充区域内容{
溢出：自动；
弹性：1；
身高：100%；
}
/*你的代码*/
.flexbox父控制台{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
/*在主轴上对齐项目*/
对齐项目：拉伸；
/*在横轴上对齐项目*/
对齐内容：拉伸；
/*横轴上的额外空间*/
}
.self-center{}
.溢出隐藏{
溢出：隐藏
}
.轮换{
宽度300px；
高度：24px；
文本对齐：居中；
背景：绿色；
}
.b--浅灰色{
边框颜色：#eee
}
.bg-black-10{
背景色：rgba（0,0,0,1）
}
.bw2{
边框宽度：.25rem
}
.b--固体{
边框样式：实心
}
.pa2{
填充：.5rem
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

表1
表2

你很接近，但这里有两个小问题： 1） 您的

.self-center

类会覆盖对齐周围的

空间
2） 您需要将
display:flex
添加到
.flex列
，使其本身成为flexbox

希望这有帮助


.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}