css - 如何仅在 CSS 中使用 Flexbox 将 CSS 更改为垂直制表符

Question

我想看看是否有一种方法可以通过仅更改 CSS 来创建垂直选项卡。我使用的解决方案非常适合水平选项卡，并且仅是 CSS。我想看看是否可以修改 CSS 使其成为垂直制表符而不更改 HTML。

[role=tablist] {
  display: flex;
  flex-direction: column;
  background: #eee;
  width: 400px;
  margin: auto;
}

label {
  border: 1px solid #ddd;
  padding: 1em;
  cursor: pointer;
  display: block;
  width: 70px;
}

[role=tabpanel] {
  order: 9999;
  display: none;
  padding: 1em;
}

label:has(:checked) + [role=tabpanel] {
  display: block;
}

<div role="tablist">
    <label>
        Tab 1
        <input name="tablist" type="radio" checked="">
    </label>
    <div role="tabpanel">
        Tab 1 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <label role="tab">
        Tab 2
        <input name="tablist" type="radio">
    </label>
    <div role="tabpanel">
        Tab 2 content. Invidunt ut labore et dolore magna aliquyam erat
    </div>
    <label role="tab">
        Tab 3
        <input name="tablist" type="radio">
    </label>
    <div role="tabpanel">
        Tab 3 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
</div>

我只需要知道是否有办法将选项卡面板移动到右上角而不使用绝对位置，因为我需要保留它们的高度。或者是否有某种方法可以处理 flex-grow , shrink , basis等选项卡或使用 <i>xxxx</i>-self在选项卡或选项卡面板等上。

如果我还可以将选项卡右侧与左侧的选项卡面板对齐，那就太好了。

Answer 1

这种界面最适合网格:

[role="tablist"] {
  /* 2 columns & 3 rows, with the right part marked as "d" */
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: 1fr;
  grid-template-areas:
    'a d'
    'b d'
    'c d';
}

label {
  grid-column: 1;
}

[role="tabpanel"] {
  /* Assign any visible panel to the "d" area */
  grid-area: d;
}

尝试一下:

[role="tablist"] {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: 1fr;
  grid-template-areas:
    'a d'
    'b d'
    'c d';
  margin: auto;
  height: 450px;
  width: 400px;
  background: #eee;
}

label {
  grid-column: 1;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 1em;
  cursor: pointer;
}

[role="tabpanel"] {
  display: none;
  grid-area: d;
  padding: 1em;
}

label:has(:checked) + [role="tabpanel"] {
  display: block;
}

<div role="tablist">
  <label role="tab">
    Tab 1
    <input name="tablist" type="radio" checked>
  </label>
  <div role="tabpanel">
    Tab 1 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <label role="tab">
    Tab 2
    <input name="tablist" type="radio">
  </label>
  <div role="tabpanel">
    Tab 2 content. Invidunt ut labore et dolore magna aliquyam erat
  </div>
  <label role="tab">
    Tab 3
    <input name="tablist" type="radio">
  </label>
  <div role="tabpanel">
    Tab 3 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>