Spacing with flexbox for vertical button

Question

I would like to have buttons in a fixed position but positioned vertically with flexbox. I managed to do part of the work but impossible to make identical spacing between each button. Best Regards

Less

.block-fixed-right{
  position: fixed;
  right:0;
  .vertical-btn{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 3rem;
    .btn {
      //margin: 2em auto;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-lr;
    }
  }
}

HTML

<div class="block-fixed-right">
    <div class="vertical-btn">
        <a class="btn btn-main" href="/{$lang}/devis/">Devis</a>
        <a class="btn btn-main" href="/{$lang}/devis/">Mon super bouton</a>
        <a class="btn btn-main" href="/{$lang}/devis/">contactez moi</a>
    </div>
</div>

overview of my problem

Answer 1

You don't have to rotate buttons, you need to rotate the container only, and style buttons with flex.

Here is a code snipped of the styling of buttons, note: that some buttons will be clipped as the screen height in code snipping is small.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block-fixed-right {
  position: fixed;
  top: 0;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #ddd; */

  width: 50px;
  height: 100vh;
  /* margin-top: 3rem; */
}
.vertical-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(180deg);
}
.btn {
  display: block;
  margin: 8px 0;
  writing-mode: vertical-lr;
  padding: 24px 16px;
  border-radius: 8px;
  color: white;
  background-color: #3c62aa;
  text-decoration: none;
}

    <div class="block-fixed-right">
      <div class="vertical-btn">
        <a class="btn btn-main" href="#">Devis</a>
        <a class="btn btn-main" href="#">Mon super bouton</a>
        <a class="btn btn-main" href="#">contactez moi</a>
      </div>
    </div>

    <div class="text">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
    </div>