1

3 つの子を持つフレックスボックス要素があります。

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

最初の 2 つの子をボックスの上部に揃えたいのですが、3 番目の子については垂直方向の中央に配置したいと考えています。私はそれを機能させることができないようです。これが私が試したことです：

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

何か提案はありますか？

4

1 に答える 1

1

親によって設定されているため、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;}
于 2013-01-11T03:08:12.840 に答える