@Roman_Gy

Как выровнять перевернутый текст во flex-контейнере?

Подскажите, пожалуйста, как выровнять перевернутый текст во флекс-контейнере, чтобы он был на уровне с остальными элементами?

Например, есть колонки, одна из них перевернута transform: rotate(-90deg) и она начинает "выпадать" из контейнера, как можно сделать так, чтобы вторая колонка по нижней границе была на уровне с остальными?

То есть хочется прибить текст в третьей колонке к правому нижнему краю.

6013f7ce0be63396975084.png

Codepen
  • Вопрос задан
  • 272 просмотра
Пригласить эксперта
Ответы на вопрос 1
Тебе так Надо?:

60140044bfa0b541510502.jpeg

<div class="f-box">
  <div class="box">
    <div class="inner__box">
      column-1
    </div>
    
  </div>
  <div class="box">
      <div class="inner__box">
      column-2
    </div>
  </div>
  <div class="box box-3">
      <div class="inner__box">
        column-3
    </div>
 </div>
</div>

.f-box{
  display: flex;
  font-size: 25px;
}
.box{
  display: flex;
  justify-content: start;
  align-items: end;
  height: 200px;
  width: 200px;
}

.box-3{
  transform: rotate(90deg);
  justify-content: end;
}

.box:nth-of-type(1){
  background: silver;
}

.box:nth-of-type(1){
  background: silver;
  font-size: 25px;
}
.box:nth-of-type(2){
  background: lime;
}

.box:nth-of-type(3){
  background: royalblue;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы