Remove vertical spacing from flex-wrap:wrap property

Question

I have this plunkr here. How to remove the vertical spacing while using flex-wrap: wrap;

#main {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
}

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

`align-content: flex-start;` to `#main` – doğukan Jul 02 '21 at 14:20 — doğukan, Jul 02 '21 at 14:20
remove height poperty css from #main css block – Md. Abu Sayed Jul 02 '21 at 14:33 — Md. Abu Sayed, Jul 02 '21 at 14:33

score 2 · Accepted Answer · answered Jul 02 '21 at 14:22

2

You should use align-content: flex-start; on #main

answered Jul 02 '21 at 14:22

Shashank Vivek

16,888
8
62
104

score 0 · Answer 2 · answered Jul 02 '21 at 14:27

#main {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

Remove vertical spacing from flex-wrap:wrap property

2 Answers2