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/ < / p>

<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;}

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

1 个答案: