flexbox布局中的垂直文本

Question

我的投资组合有一个首页布局，我正在尝试在其上实现一些垂直文本。右边部分（蓝色）是我的名字将被竖写的地方。当我尝试通过 css 变换旋转文本时，它在滚动时搞砸了布局。所以我难住了。您必须将大小增加到整页才能正确查看布局。名称应延伸到蓝色容器的全长。 https://codepen.io/marti2221/pen/BdrdZJ

<div class="container">
 <div class="left">
<div class="svg-container">
  <div class="svg-logo"></div>
</div>
<div class="question-container">
  <p>WHO AM I?</p>
  <p>WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
  <nav>
    <a>Link1</a>
    <a>Link2</a>
    <a>Link3</a>
    <a>Link4</a>
  </nav>
</div>
<div class="bottom">
  <h1>Im an extremely</br> passionate User</br> Interface Design</br> + 
Developer</h1>
</div>
</div>
<div class="right">
<h1></h1>
</div>
</div>



.container{
display: flex;
height: 100vh;
background: black;
}



.left{
display: flex;
flex: 1;
background: gray;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.svg-container{
display: flex;
flex-grow: 1;
background: yellow;
width: 100%;
 justify-content: center;
 }
.svg-logo{
height: 100px;
width: 200px;
background: orange;
}
.question-container{
display: flex;
flex-grow: 1;
background: green;
width: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
p{
display: flex;
margin-right: 10px;
}



.middle{
display: flex;
flex: 3;
background: red;
flex-direction: column;
}
.top{
display: flex;
flex: 1;
background: aqua;
}
nav{
display: flex;
flex-direction: column;
margin: 65px 0 0 65px;
}

a:before {
content: '14';
position: absolute;
margin-left: -40px;
} 
a{
margin: 10px 0 10px 0;
font-size: 24px;
}


.bottom{
display: inline-flex;
flex: 1;
background: brown;
align-items: flex-start;
}
h1{
 margin-left: 25px;
font-size: 55px;
}


.right{
display: flex;
flex: .5;
background: blue;
}

.name{
transform: rotate(90deg);
}

Answer 1

sideways-lr 单独（没有 transform）将解决它，尽管截至目前只有 Firefox 支持它。

将 writing-mode: vertical-lr; 与 transform: rotate 结合使用，它的表现会更符合您的预期

Updated codepen

堆栈片段

.container{
  display: flex;
  height: 100vh;
  background: black;
}



.left{
  display: flex;
  flex: 1;
  background: gray;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.svg-container{
  display: flex;
  flex-grow: 1;
  background: yellow;
  width: 100%;
  justify-content: center;
}
.svg-logo{
  height: 100px;
  width: 200px;
  background: orange;
}
.question-container{
  display: flex;
  flex-grow: 1;
  background: green;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
p{
  display: flex;
  margin-right: 10px;
}



.middle{
  display: flex;
  flex: 3;
  background: red;
  flex-direction: column;
}
.top{
  display: flex;
  flex: 1;
  background: aqua;
}
nav{
  display: flex;
  flex-direction: column;
  margin: 65px 0 0 65px;
}

a:before {
  content: '14';
  position: absolute;
  margin-left: -40px;
}
a{
  margin: 10px 0 10px 0;
  font-size: 24px;
}


.bottom{
  display: inline-flex;
  flex: 1;
  background: brown;
  align-items: flex-start;
}
h1{
  margin-left: 25px;
  font-size: 55px;
}


.right{
  display: flex;
  flex: .2;
  background: blue;
  flex-direction: column;
  justify-content: center;
}

.name{
  display: flex;
  transform: rotate(-180deg);            /*  changed  */
  background: pink;
  writing-mode: tb-lr;                   /*  for IE  */
  writing-mode: vertical-lr;             /*  added  */
}

<div class="container">
  <div class="left">
    <div class="svg-container">
      <div class="svg-logo"></div>
    </div>
    <div class="question-container">
      <p>WHO AM I?</p>
      <p>WHAT DO I DO?</p>
    </div>
  </div>
  <div class="middle">
    <div class="top">
      <nav>
        <a>Link1</a>
        <a>Link2</a>
        <a>Link3</a>
        <a>Link4</a>
      </nav>
    </div>
    <div class="bottom">
      <h1>Im an extremely</br> passionate User</br> Interface Design</br> + Developer</h1>
    </div>
  </div>
  <div class="right">
    <h2 class="name">Travis Martin</h2>
  </div>
</div>

flexbox布局中的垂直文本

vertical text in flexbox layout

css

text

vertical-alignment

flexbox