如何按出现顺序在 CSS FlexBox 中按垂直顺序旋转（不堆叠）HTML 块？

Question

给定一个逻辑（搜索引擎可读）HTML 菜单，其中包含一个包裹在 <nav> 中的无序列表菜单，从“主页”项开始到“博客”项结束。我在纯 CSS 和 HTML 中尝试了几件事，但无法实现我想要的。

我想要的是：

自动将整个垂直菜单对齐到屏幕的左上边缘。
不管<nav>!!
中包含的列表项的长度有多少and/or
将每个带下划线 link 的可点击区域扩展到其整个蓝色块。
为了便于在悬停和单击菜单项时使用。
理想情况下，我们应该抛开失败的开始，选择 FlexBox CSS 设计。
也许这为我们所有人提供了更好的灵活性来实现这一目标。那将是一个奖励！

nav {
  text-align:center;
  transform: rotate(-90deg) translateX(-240px) translateY(-100px);
  margin: 0;
  top: 0px;
  left: 0px;
  position: absolute;
}

nav li{
    display: inline-block;
    background-color: blue;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    margin: 5px auto;
    padding: 1em;
}

nav li a{
  color: #fff;
}

nav li a:hover{
  background: black;
}

nav li.selected {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="selected"><a href="#">Philosophy</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

Answer 1

不要玩太多变形。使用 writing-mode 然后将应用于 li 的样式移动到 a 以使 link 区域更大。

nav {
  top: 0px;
  left: 0px;
  position: absolute;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  background-color: blue;
  writing-mode: vertical-rl; /* */
  transform: scale(-1); /* */
  margin: 5px 0;
}
nav li a {
  color: #fff;
  padding: 1em;
  display: inline-block;
  line-height: 24px;
}
nav li a:hover {
  background: black;
}
nav li.selected {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="selected"><a href="#">Philosophy</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

如何按出现顺序在 CSS FlexBox 中按垂直顺序旋转（不堆叠）HTML 块？

How to ROTATE (NOT stack) HTML blocks in vertical order in CSS FlexBox in order of appearance?

html

css

menu

vertical-text

flexbox