html - 将 FlexBox Div 并排放置

Question

我遇到过 float 元素彼此相邻的问题，因为如果一个元素大于它会创建一个巨大的空间并且对于我正在制作的网站来说非常违反直觉，因为新内容会经常添加。

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

  .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>

Answer 1

我意识到你想水平放置容器，所以我认为你需要这样的东西:

.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>