在 flex 内左对齐旋转的文本

Question

我在网页中有一个类似卡片的结构。 每张卡片都是一个图表。 我需要为卡片的任何纵横比显示每个图形的 y 轴标签。
HTML

<div class="grid">
     <div class="chart">
          <h2>Test 1</h2>      
          <div class="graphAxisY">test y lable</div>
          <Graph class="graph">(This is the graph)</Graph>
          <div>test x lable</div>
     </div>
     <div class="chart">
          <h2>Test 2</h2>      
          <div class="graphAxisY">test y lable</div>
          <Graph class="graph">(This is the graph)</Graph>
          <div>test x lable</div>
     </div>
</div>

CSS

.graphAxisY{
  transform-origin: 0% 0%;
  transform: rotate(270deg) translate(-22%, 25%);  
  background-color: transparent; 
  z-index: 100; 
}
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,33%);
}
.chart{
  display: flex;
  flex-direction: column;
  padding-right: 0.8vw;
}

当图形的纵横比为 4 时，结果很好

当图形的纵横比为 1 时，结果不好

请注意，Y 标签文本未在垂直轴上居中。 如何为具有可变纵横比的弹性框放置 Y 轴标签？

Answer 1

你能不能把chart显示改为“flow-root”，像这样？：

 .graphAxisY { transform-origin: 0% 0%; transform: rotate(270deg) translate(-33%, 0%); background-color: transparent; z-index: 100; } .graphAxisX { text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, 33%); } .chart { display: flow-root; flex-direction: column; padding-right: 0.8vw; } .graph { padding: 0% 15% 25% 15%; display: flex; }

 <div class="grid"> <div class="chart"> <h2>Test 1</h2> <div class="graphAxisY">test y label</div> <Graph class="graph">(This is the graph)</Graph> <div class="graphAxisX">test x label</div> </div> <div class="chart"> <h2>Test 2</h2> <div class="graphAxisY">test y label</div> <Graph class="graph">(This is the graph)</Graph> <div class="graphAxisX">test x label</div> </div> </div>