Left align a rotated text inside a flex

user_14561199 0
Viewed 60

I have a card like structure in a webpage. Each card is a graph. I need to display the y axis label for each graph for any aspect ratio of cards.
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;
}

Result is fine when the aspect ratio of graphs is 4 Aspect ratio 4

Results is not fine when aspect ratio of a graph is 1 Aspect ratio 1

Notice the Y label text is not centered in vertical axis. How can I put the Y axis label for a flex box with a variable aspect ratio?

flexbox css html
1 Answers

Could you change the chart display actually to "flow-root" instead, like so?:

.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>

example of snippet

user_67146270
Related