Question

我想完成垂直标签的布局，因此左侧是标签，右侧是标签内容。面临的挑战是我必须遵守特定的标记，这会使事情变得复杂。

以下是我的最后一次尝试，我无法使选项卡填充内容剩余的空间：

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是否可以解决此问题？

谢谢

Answer 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>

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

带弹性盒的垂直标签

1 个答案: