css - Flexbox 列、标题和定位

Question

我的 flexbox 布局有问题。我创建了一支笔供您查看:

http://codepen.io/r3plica/pen/PqONKq

我想做的是创建 2 列。在每一列中都有一些“框”。这些盒子应该间隔均匀，呈正方形，从上到下排成一行，然后再从顶部开始缠绕到下一行。正如您从我的 codepen 中看到的那样，我几乎拥有了它，只是包裹的元素没有像我想要的那样间隔开。我尝试使用:

align-content: flex-start;

在 .flex-column 上，但这没有用。我也试过:

justify-content: flex-start;

但这也没有任何作用。

另一个问题是，我想在我的专栏中添加标题，但一旦我添加一个标题，它就会把一切都搞砸(正如您想象的那样)。

所以我的问题是双重的:

1. 如何正确排列我的框，使它们与列的顶部对齐？
2. 我怎样才能添加一个不会弄乱我的盒子的标题？

如有任何帮助，我们将不胜感激。

Answer 1

您的 flex 元素没有与顶部对齐，因为您使用了 margin: auto。

但是如果你删除它，第一列中的 flex 元素将不会均匀分布。

使用 justify-content: space-around 你会遇到同样的问题。

相反，您可以尝试 justify-content: space-between:

html,
body {
  padding: 0;
  margin: 0;
}
.container {
  height: 100vh;
  display: flex;
}
.row {
  display: flex;
  padding: 50px 20px 20px;
}
.flex-column {
  background-color: pink;
  width: 320px;
  margin-right: 100px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.box {
  background-color: blue;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>