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