带有弹性框的垂直标签答案

【问题标题】：Vertical tabs with flex box带有弹性框的垂直标签
【发布时间】：2018-08-21 06:30:00
【问题描述】：

我想实现一个垂直的标签布局，所以左边是标签，右边是标签内容。挑战在于我必须遵守特定的标记，这会使事情变得复杂。

以下是我最后一次尝试，我无法让标签填充内容留下的空间：

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tabs-container{
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.tab{
 width: 100px;
 background-color: gray;
}

.tab-content{
  display: none;
}
.tab-content.active{
  display: block;
  height: 100px;
  order: -1;
  align-self: flex-end;
}

<ul class='tabs-container'>
  <li class='tab'>tab one</li>
  <li class='tab-content active'>contents tab one</li>
  <li class='tab'>tab two</li>
  <li class='tab-content '>contents tab two</li>
  <li class='tab'>tab three</li>
  <li class='tab-content'>contents tab three</li>
</ul>

有没有使用 css flex box 解决这个问题的方法？

谢谢

【问题讨论】：

标签： css flexbox

【解决方案1】：

<div class="container">
    <div class="obj"><div class="tab">Tab1</div><div class="tab-c">TabContent1</div></div>
    <div class="obj"><div class="tab">Tab2</div><div class="tab-c">TabContent2</div></div>
</div>
<style>
    .container {
        display: flex;
        flex-direction: column;
        background-color: tomato;
    }
    .obj {
        display: flex;
        /*no need of specify the flex direction here it's row by default*/
        background-color: orange;
        margin: 10px;
    }
    .tab {
        width: 50px;
        background-color: yellow;
    }
    .tab-c {
        width: 150px;
        background-color: white;
    }
</style>

这可能不是最优雅的方式，但它可以满足我的需求

【讨论】：