【问题标题】：How to vertically align an item in flexbox rows如何垂直对齐弹性框行中的项目
【发布时间】：2021-03-22 11:39:23
【问题描述】：

我听说弹性盒是一维的，只是想检查是否有任何方法可以将特定弹性盒项目（具有相同顺序的项目）垂直对齐，如下图所示。（带0的圆圈应该在红色竖线上）

【问题讨论】：

【解决方案1】：

至于您的问题，您必须使用 CSS 伪选择器选择要在线移动的项目。我想出了以下解决方案。

解决方案

希望下面的代码对你有所帮助。

<style>
.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
  justify-content: space-between;
}

.flex-left > div, .flex-right > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flex-left>div:nth-child(2n+2){
  width: 200px;
}
.flex-right>div:nth-child(even){
  width: 200px;
}
.flex-right>div:nth-child(odd){
  background: #222;
  color: #fff;
  margin-left: -20vw;
}
</style>

<div class="flex-container">
<div class="flex-left">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
  <div>5</div>
</div>
<div class="flex-right">
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
</div>

【讨论】：