flexbox，第一个元素块换行

Question

我在CSS中使用flexbox，但是您可以看一下问题，我不希望此边距1和2如下。

.container {
  display:flex;
  flex-wrap:wrap;
  width:500px;
  border:4px solid black;
  padding:2px;
}
.float {
  width:250px;
  height:200px;
  border:1px solid red;
  margin-bottom:2px;
}
p {
  width:120px;
  height:100px;
  border:1px solid blue;
  margin:auto;
  margin-top:0;
  }

<div class="container">
  <p class="float">Left element</p>
  <p>1</p>
  <p>2</p>
  <p>element</p>
  <p>element</p>
  <p>I want bellow 1 (there is a hole)</p>
  <p>I want bellow 2 (same)</p>
</div>

我尝试了很多事情，但无法修复... 希望你能帮助我！

Answer 1

CSs-Grid可以做到

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: inline-grid;
  grid-template-columns: repeat(4, 125px);
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: row dense;
  border: 4px solid black;
}

.float {
  width: 250px;
  height: 200px;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  border: 1px solid red;
}

p {
  width: 125px;
  height: 100px;
  border: 1px solid blue;
}

.under {
  grid-row: 3;
}

<div class="container">
  <p class="float">Left element</p>
  <p>1</p>
  <p>2</p>
  <p class="under">element</p>
  <p class="under">element</p>
  <p>I want bellow 1 (there is a hole)</p>
  <p>I want bellow 2 (same)</p>
</div>

Answer 2

使用flex，并使用与column相同的方向。此方法需要固定的高度和宽度才能工作。我必须为每个div标签集插入p标签，还要更改源中元素的顺序。

.container {
  display:flex;
  flex-direction: column;
  flex-wrap:wrap;
  height:307px;
  width: 500px;
  border:4px solid black;
  padding:2px;
}
.float {
  width:250px;
  height:200px;
  border:1px solid red;
  margin-bottom:2px;
}
p {
  width:120px;
  height:100px;
  border:1px solid blue;
  margin:0;
  display:inline-block;
  }

<div class="container">
  <p class="float">Left element</p>
  <div>
  <p>element</p>
  <p>element</p>
  </div>
  <div>
  <p>1</p>
  <p>2</p>
  </div>
  <div>
  <p>I want bellow 1 (there is a hole)</p>
  <p>I want bellow 2 (same)</p>
  </div>
</div>