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