css - 如何覆盖特定孩子的 box-align css 属性？

Question

我有一个包含三个孩子的 flexbox 元素：

<div class="box">
    <div>un</div>
    <div>deux</div>
    <div>trois</div>
</div>

我想将前两个孩子对齐到盒子的顶部，但是对于第三个孩子，我想将它垂直居中。我似乎无法让它工作。这是我尝试过的：

.box {
  width: 350px;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;

  display: -webkit-box;
  -webkit-box-align: start;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;

}

.box > div:nth-child(1){ background : #FCC; height: 20px;}
.box > div:nth-child(2){ background : #CFC; height: 25px;}
.box > div:nth-child(3){ background : #CCF; height: 15px; -webkit-box-align: center;}

这是jsfiddle：

http://jsfiddle.net/TDUd5/15/

请问有什么建议吗？

Answer 1

我不确定是否可以更改一个弹性项目的对齐方式，因为这是由父项设置的，因此另一种方法是为每一列设置一个迷你包装器，从那里设置对齐方式：http: //jsfiddle.net/TDUd5 /30/

<div class="box">
  <div class="start"><div>un</div></div>
  <div class="start"><div>deux</div></div>
  <div class="center"><div>trois</div></div>
</div>

CSS：

.box {
  width: 350px;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;

  display: -webkit-box;
}

.box > div.start { -webkit-box-align: start; }
.box > div.center { -webkit-box-align: center; }

.box div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  display: -webkit-box;
}

/* our colors */ 
.box > div:nth-child(1) > div{ background : #FCC; height: 20px;}
.box > div:nth-child(2) > div{ background : #CFC; height: 25px;}
.box > div:nth-child(3) > div{ background : #CCF; height: 15px;}