1
我有父级柔性容器（.content-flexbox-row）与行方向，其中我创建了具有列方向的另一个柔性（3列）。用柔性盒子对齐子元素
在第1列我有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的plunker网址看问题： https://plnkr.co/edit/J9zoXoQgbVphzvSVkmQ6?p=preview
这样的事情？ https://jsfiddle.net/cewL42fd/ –
@stefan：正是这一个...非常感谢 – user1645290