Flexbox在列中水平居中固定宽度的行

Question

如何将固定宽度的行水平放置在面向列的弹性框中？ justify-content: center;听起来应该可以做到这一点，但它似乎不起作用。小提琴中的最小例子：http://jsfiddle.net/ngr06e8w/

Answer 1

只需在align-items: center;

的css中添加.col即可

这里是更新的小提琴：http://jsfiddle.net/ngr06e8w/1/

Answer 2

您必须使用.col{margin:0 auto;}代替justify-content: center;，您就完成了。

.col {
  display: flex;
  flex-direction: column;
  width: 500px;
  padding: 15px;
  background: #ccc;
    margin:0 auto;
}
.row1 {
  height: 300px;
  width: 500px;
  background: red;
}
.row2 {
  height: 300px;
  width: 300px;
  background: blue;
}

<div class="col">
  <div class="row1">
  </div>
  <div class="row2">
  </div>
</div>