Flexbox垂直对齐和旋转文本

Question

我想在左侧或右侧标注一个部分。每个部分的标签应垂直居中并旋转90度。

我尝试使用flexbox将其归档，但标签文本始终向右流动，具体取决于标签的文本长度。 我不知道如何解决这个问题。

Answer 1

我使用嵌套的flexbox进行对齐。

＆＃13;

＆＃13;

.section {
  display: flex;
  height: 10em;
  border: thin solid darkgray;
}

.section:not(:last-child) {
  margin-bottom: 0.5em;
}

.label {
  width: 3em;
  background: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label p {
  transform: rotate(270deg);
}

.content {
  padding: 0.5em;
}

＆＃13;

<div class="container">
  <div class="section">
    <div class="label">
      <p>Label</p>
    </div>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="section">
    <div class="label">
      <p>asdlkfdfdasdlfasd</p>
    </div>
    <div class="content">Lorem Ipsum</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题在于，变换后的元素在布局中占据了相同的位置，就像它未被转换一样。因此，您必须使用绝对定位来修复它。演示：

＆＃13;

＆＃13;

.section {
  position: relative;
  /* move content to label width + some offset */
  padding-left: 35px;

  /* just styles for demo */
  background-color: #e0e0e0;
  height: 100px;
}

.label-wrapper {
  /* absolutely positioned-element */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* setting height of content + some offset */
  width: 30px;
  /* become a flex-container */
  /* its children will be flex-items */ 
  display: flex;
  /* center flex-items vertically */
  align-items: center;
  /* center flex-items horizontally */
  justify-content: center;

  /* just style for demo */
  background-color: #a0a0a0;
}

.label {
  /* rotate text */
  transform: rotate(-90deg);
}

＆＃13;

<div class="section">
  <div class="label-wrapper">
    <div class="label">
      ASD
    </div>
  </div>
  This is content
</div>

＆＃13;

＆＃13;

＆＃13;