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