如何仅用CSS Flexbox将水平标签改为垂直标签

完全可以通过Flex的order、flex-grow、margin等属性实现需求，不用修改HTML结构，也不需要position: absolute。以下是具体方案：

核心思路 #

1. 调整父容器的Flex布局方向为水平排列，通过order属性调换标签和面板的显示顺序，让面板居左、标签居右。
2. 给标签容器设置垂直排列，实现垂直标签效果。
3. 利用margin-left: auto让标签容器自动靠右对齐，flex-grow: 1让面板填充左侧剩余空间，同时保留高度自适应。

代码示例 #

假设你的原始HTML结构如下（无需修改）：

<div class="tab-container">
  <!-- 原水平标签容器 -->
  <div class="tabs">
    <button class="tab active">标签1</button>
    <button class="tab">标签2</button>
    <button class="tab">标签3</button>
  </div>
  <!-- 原面板容器 -->
  <div class="tab-panels">
    <div class="tab-panel active">面板1内容<br>多行示例<br>高度自适应</div>
    <div class="tab-panel">面板2内容</div>
    <div class="tab-panel">面板3内容</div>
  </div>
</div>

调整后的CSS：

/* 父容器：水平Flex布局，顶部对齐 */
.tab-container {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem; /* 标签和面板之间的间距，可自定义 */
}

/* 面板容器：调整顺序到最左侧，填充剩余空间 */
.tab-panels {
  order: -1; /* 让面板排在标签前面 */
  flex-grow: 1; /* 占据左侧全部可用空间 */
}

/* 标签容器：垂直排列，自动靠右 */
.tabs {
  display: flex;
  flex-direction: column; /* 垂直排列标签 */
  margin-left: auto; /* 自动推到右侧 */
  flex-shrink: 0; /* 避免标签被压缩 */
}

/* 面板基础样式：默认隐藏，激活时显示 */
.tab-panel {
  display: none;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
.tab-panel.active {
  display: block;
}

/* 标签样式：自定义外观 */
.tab {
  padding: 0.8rem 1.2rem;
  border: none;
  background: #f5f5f5;
  cursor: pointer;
  text-align: right; /* 标签文字靠右，可选 */
}
.tab.active {
  background: #e0e0e0;
  font-weight: bold;
}

关键属性说明 #

• order: -1：将面板容器的渲染顺序提前，实现左置效果，无需修改HTML结构。
• margin-left: auto：利用Flex的自动边距特性，让标签容器自动靠向父容器右侧。
• flex-grow: 1：让面板容器填充左侧剩余空间，高度随内容自适应，保留布局流中的高度。
• flex-shrink: 0：防止标签容器在空间不足时被压缩，保证标签内容完整显示。

这样就能实现你要的「标签垂直居右、面板左置且高度自适应」的效果，完全符合需求。

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