Languages

React - remove space between components inside flexbox

0 points
Asked by:
Lily
208

How to remove space between components inside the flexbox in ReactJS?

I specified flexbox with flex-wrap and the components align well when there are too many of them, but they are spread over the entire surface of the flexbox, and I wish there was one row right below the other.

How to achieve such an effect?

flexbox CSS file:

.taskBoard {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0px 0px 20px;
  position: fixed;
  top: 85px;
  left: 338px;
  right: 15px;
  bottom: 15px;
  background: white;
  border-radius: 10px;
  box-shadow: 10px 10px 10px #dcdcdc;
  border: 1px solid #f0efef;
}

Example:

1 answer
0 points
Answered by:
Lily
208

Add align-content: flex-start; to the styles so components will move to the flexbox starting point (top-left corner) and they will be packed one row right below the other.

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join