将 FlexBox div 并排放置答案

【问题标题】：Putting FlexBoxed Divs next to eachother将 FlexBox div 并排放置
【发布时间】：2018-07-21 01:52:14
【问题描述】：

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

我做了一些研究，发现我应该使用 flexbox 将项目相互对齐，所以无论元素有多大，它永远不会像浮动元素那样做。一开始效果很好，但后来我遇到了无法将这些元素放在一起的问题。我基本上是在寻找一种方法让这些 div 彼此相邻浮动，但我已经实现的 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>

【问题讨论】：

How to arrange three flex div side by side的可能重复
你能分享一个预期的结果模型或图像，以便我们了解你的期望
不，不是重复的，您链接到的标题表明它会是答案，但其中的内容并不能真正回答我的问题。谢谢@Hector
这里link 是指向源图像@Girish 的链接。我确实在寻找一个 3x3 的网格，但使用 flexbox，所以我可以制作任何大小的盒子。我基本上是在为每个容器寻找一个浮动，但我对 flexbox 没有经验，所以我不知道该怎么做。三个方框周围的圆圈代表每个容器。

标签： html css

【解决方案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>

【讨论】：

谢谢，这正是我要找的。span>