如何从下至上开始文字？

Question

如何从下至上开始文字？

我需要

我尝试过：

.rotated {
  writing-mode: tb-rl;
  transform: rotateZ(-270deg);
}

<div class="rotated">
  <span>5000</span><br>
  <span>3000</span><br>
  <span>2000</span><br>
  <span>1000</span>
</div>

  

使用<br />可以轻松解决，但是在屏幕较小且<div>为position: fixed;的情况下将无用。

Answer 1

只需更改添加项目的顺序并使用flex这样，即可：

.rotated {
  display: flex;
  height: 300px;
  flex-direction: column-reverse;
}

<div class="rotated">
  <span>1000</span>
  <span>2000</span>
  <span>3000</span>
  <span>5000</span>
</div>

Answer 2

您可以将flexbox（display: flex）与align-items: flex-start和justify-content: flex-end结合使用。

.rotated {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  
  /* For demo */
  border: 1px solid black;
  height: 200px;
  width: 200px;
}

<div class="rotated">
  <span>5000</span><br>
  <span>3000</span><br>
  <span>2000</span><br>
  <span>1000</span>
</div>