Question

我的flexbox布局遇到了一些麻烦。我已经创建了一支笔供您查看：

我要做的是创建2列。在每列中都有一些“盒子”。这些盒子应该是均匀间隔的，是方形的，从上到下的线条包裹在它们再次从顶部开始的下一条线上。正如你从我的codepen中看到的，我几乎拥有它，除了包装的物品没有按照我的意愿间隔。我尝试使用：

align-content: flex-start;

.flex-column 上的

但是没有用。我也尝试过：

justify-content: flex-start;

但这也没有做任何事。

另一个问题是我希望在我的专栏中有标题，但是只要我添加一个标题就会让所有内容混乱（正如您所想象的那样）。

所以我的问题有两个：

如何正确排列我的盒子，使它们与色谱柱顶部对齐？
如何添加不会弄乱我的盒子的标题？

非常感谢任何帮助。

Answer 1

您的弹性项目未与顶部对齐，因为您使用margin: auto。

但如果删除它，第一列中的弹性项目将不会均匀分布。

使用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>

Answer 2

好吧，似乎这个问题的解决方案是在项目周围留有余量。 justify-content 需要设置为 flex-start ，以便将项目保持正确的对齐方式以进行换行。必须明确设置列，这对我来说不是问题，因为无论如何我都是这样做的。我的codepen已经更新了。

Flexbox列，标题和定位

2 个答案: