flexbox, first element block wrap

Question

I'm using flexbox for css but you can look the problem, I don't want this margin bellow 1 & 2 elements.

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

I tryed lots of things but impossible to fix it... Hope you can help me!

This is not possible with flexbox or floats. This will require CSS-Grid or Javascript. — Paulie_D, Jul 04 '18 at 09:37
Wait, maybe I missunderstood your question. Can you provide an image with the expected behaviour? — Andy, Jul 04 '18 at 09:37
There is like 100px margin between first p and the p below, I DONT WANT I want only 2 p below the left element. And 4 p right to the left element. — PierreD, Jul 04 '18 at 09:39

score 3 · Accepted Answer · answered Jul 04 '18 at 09:45

3

CSs-Grid can do that

* {
  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>

answered Jul 04 '18 at 09:45

Paulie_D

107,962
13
142
161

1

Sidenote: This is a great solution, as long as you do *not* have to support IE – Grenther Jul 04 '18 at 09:50
IE supports Grid - it just needs help - https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ – Paulie_D Jul 04 '18 at 09:50
1

[currently this is how it looks on IE](https://i.stack.imgur.com/MbxiY.png) so yeah it does need work, thus it's not supported by the standard. – Grenther Jul 04 '18 at 09:55

score 0 · Answer 2 · answered Jul 04 '18 at 10:09

Achieved the same using flex, using the direction as column. This method would need fixed height and width to work. I had to insert div tag for every set of p tag, also change the order of elements in the source.

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

flexbox, first element block wrap

2 Answers2