使用flexbox

Question

我有父行方向的Flex容器（.content-flexbox-row），我正在创建另一个带列方向的flex（3列）。

在第一栏中我有3个项目，第二栏我有1个项目，第三个栏目我有2个项目。

我在这里遇到的问题是第二列，第三列是基于第一列的中心位置。

我希望2和3列数据从头开始而不是中心。

.content-flexbox-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 60%;
  margin: 0 auto;
  border-bottom: 1px solid #EBEBEB;
  align-items: center;
}

.content-flexbox-row-last-row {
  border-bottom: 1px solid white;
}

.content-flexbox-row .content-first,
.content-flexbox-row .content-second,
.content-flexbox-row .content-third {
  font-size: 12px;
  color: teal;
  font-weight: bold;
  text-align: center;
}

.content-flexbox-row .content-first {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.content-flexbox-row .content-second {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-flexbox-row .content-third {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.approver-names {
  height: 50px;
}

.content-second {
  border-left: 1px solid red;
  border-right: 1px solid red;
}

<div class="content-flexbox-row">
  <div class="content-first">
    <div class="approver-names">
      <div>Raphael</div>
      <div>Head of Department</div>
    </div>
    <div class="approver-names">
      <div>Michael</div>
      <div>Head of Group</div>
    </div>
    <div class="approver-names">
      <div>Juan</div>
      <div>Head of Bears</div>
    </div>
    <span>+ ADD SELECTOR</span>
  </div>
  <div class="content-second">
    <div class="approver-names">
      <div>I</div>
    </div>

  </div>
  <div class="content-third">
    <div class="approver-names">
      <div>Sancho</div>
      <div>Head of rows</div>
    </div>
    <span>+ ADD SELECTOR</span>
  </div>
</div>

PFB the plunker url查看问题： https://plnkr.co/edit/J9zoXoQgbVphzvSVkmQ6?p=preview

Answer 1

在列容器（align-items: flex-start;）上尝试.content-flexbox-row。您已将其设置为center，这就是列居中的原因。