Flexbox容器中的水平和垂直对齐方式？

Question

是否可以在Flexbox容器中对齐水平和垂直元素？ 所以你有这样的HTML：

<section class="flex-container">
    <article class="project--vertical project1"></article>
    <article class="project--vertical project2"></article>
    <article class="project--horizontal project3"></article>
    <article class="project--horizontal project4"></article>
    <article class="project--horizontal project5"></article>
</section>

可以在http://codepen.io/JordyPouw/pen/MYJOde

找到一个示例（尚未使用）

Answer 1

使用align-items属性完成交叉轴对齐。 justify-content用于沿同一轴对齐。在我看来，你只需要使用这两个属性，并将值设置为center：

  .flex-container {
  padding: 20px;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content:center;
  align-items: center;
}