将FlexBoxed Divs放在一起

Question

我曾经遇到过这样的问题：如果一个元素比其他元素大，那么它就会创造出一个巨大的空间，这对于我正在制作的网站来说是非常违反直觉的，因为新的内容会经常被添加。

我做了一些研究，发现我应该使用flexbox将项目对齐在彼此的顶部，所以不管元素有多大，它永远不会做浮动元素做的事情。一开始效果很好，但后来我遇到了无法将这些元素相邻放置的问题。我基本上是在寻找一种方法，使这些div相互浮动，但我已经实现的flexbox命令仍然有效。如果我使用display:Inline，它看起来已经起作用了，但是div是水平的，而不是垂直的。我将在下面向您展示示例代码：

null

  .container {
  width: 80%;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  width: 29%;
  border: 10px solid #edb809;
  float: left;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;

<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>

null

Answer 1

我意识到您希望从容器中水平地并排，所以我认为您需要这样的东西：

null

.wrapper {
  display: flex;
}

.container {
  flex: 1;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  border: 10px solid #edb809;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;
}

<div class="wrapper">
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
  </div>
</div>