我如何强制垂直 flexbox 中的（旋转的）元素不重叠？

Question

我想在页面的左上角放置一些旋转的文本，并在所述文本的顶部添加一行，like so。

我试着用一个垂直的弹性盒子来做到这一点。我假设通过将线绘制为 <b>div</b> ，并添加 <b>h3 </b> 元素之后，间距将由 flex box 处理。作为参考，这里是代码，

<div style="display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            margin-right: 90%; 
            height: 100vw;
            width: auto;
            ">

            <hr style="transform: rotate(-90deg);
                       width: 9%;
                       position: fixed;">

            <h3 style="font-family: Italianno; 
                       font-size: 170% ;
                       transform: rotate(-90deg);
                       margin-top: 80%;" 
                       id="fancy-logo">

                Sorority
            </h3>

</div>

不幸的是，当我调整页面大小时，顶部的线最终与单词？关于如何解决这个问题有什么建议吗？

Answer 1

尝试使用 :before 伪 class 创建行并 writing-mode 正确获取文本。

div {
  display: inline-block;
}

div:before {
  content: '';
  width: 1px;
  height: 100px;
  background: #000;
  display: block;
  margin: 0 auto;
}

h3 {
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding-bottom: 1em;
}

<div>
  <h3>
    Sorority
  </h3>
</div>

Answer 2

writing-mode确实是一个很好的入手方式，而且flex在这里也很有用，可以画出那个视线，但是从一个伪而不是hr

writing-mode 值应该是 sideways-rl，但不是所有地方都有效，这里可以使用 transform 来镜像 h3 本身。

例子

h3 {
  writing-mode: vertical-lr;
  display: flex;
  padding: 0.5em 0 0;
  transform: scale(-1, -1);
  background:lightgray
}
h3::after {
  content: "";
  flex: 1;
  border: outset 2px;
  margin: 0.5em auto 0;
}


body {margin:0;}
div {
  min-height: 80vh;/* if not enough content to stretch it */
  display: flex;
}
div[class] {margin:auto;min-height:auto;display:block;}

<div>
  <h3>
    Sorority
  </h3>
  <div class> <!-- extra markup for demo *-->
    <p>looking for more content to set here aside, but not rotated ?</p>
    <p>inside a flex box, this div can be aligned</p>
  </div>
</div>

这里有一个codepen from a

我如何强制垂直 flexbox 中的（旋转的）元素不重叠？

How do I force (rotated) elements in a vertical flexbox to NOT overlap?

html

css

margin

flexbox