html - 使用严格的 DOM 结构设计标签小部件

Question

我想制作标签小部件，我有下面的 html。这是选择选项卡 1 时的状态

<div>
    <div class="title active">Tab 1</div>
    <div class="content">Tab 1 content</div>
    <div class="title">Tab 2</div>
</div>

如果选择选项卡 2，结构将是这样的

<div>
    <div class="title">Tab 1</div>
    <div class="title active">Tab 2</div>
    <div class="content">Tab 2 content</div>
</div>

flexbox 是上述结构的选项卡样式的正确解决方案吗？由于某种原因，我无权更改结构。

即使使用 flexbox 我也卡住了，https://jsfiddle.net/dL6j1h54/

如何放下内容？

Answer 1

您可以使用 flexbox，但使用 wrap 以允许强制元素在新行开始。

* {
  box-sizing: border-box;
}

.root {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.title {
  padding: 1rem;
  background-color: lightgray;
  border: thin solid darkgray;
}

.content {
  order: 2;
  width: 100%; /* Forces to go to a new line because of flex-wrap */
}

<div class="root">
  <div class="title">Tab 1</div>
  <div class="content">Tab 1 content</div>
  <div class="title">Tab 2</div>
</div>