html - 右对齐 flex 元素并将其内容垂直居中

如何使用flex设置右框位置，以及在框中垂直居中的彩色文本？

.box {
  display: flex;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

最佳答案

使用嵌套的flex容器，以便可以对文本应用flex对齐属性。

.box {
  display: flex;

  /* new */
  justify-content: space-between; /* for right-alignment */
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;

  /* new */
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

关于html - 右对齐 flex 元素并将其内容垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52331136/