Need to avoid spacing from justify-content: space-between of last complete row after flex wrap of child divs

Question

So I've designed a component using flex-box properties. This is how it is structured

.units {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    height: auto;
}

.unit {
    height: 5.55rem;
    width: 5.8rem;
    background: #28a74520;
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

My understanding is that since units has the property of justify-content to be space-between, it maintains it throughout, however, during the circumstances of lesser number of child unit divs in the last row, the spacing between gets awkward and exaggerated. I would rather have the last row to be flex-start or something with no space, how do I achieve this?

Current Preview: Desired Output:

The "row" doesn't really exist, it's just an outcome of the wrapping. If you want it left-aligned, *don't* use space-between. — jonrsharpe, Mar 02 '20 at 08:01
Alright, but when I don't use space-between and instead use flex-start, I would need to add space between the `unit` divs. I can manage that with a margin-right/left, however, this seems to introduce a problem in which the right most `unit` divs don't touch the right margin of parent `units`. Similarly with margin-left. Do you suggest a different approach to achieve the spacing in between only, but not outside? — Jeremy, Mar 02 '20 at 08:05
You need to change at least the margin or child size according to the parent size for that. You could look at how other flex-based grid systems, like [Bulma](https://bulma.io/documentation/columns/basics/), do it. — jonrsharpe, Mar 02 '20 at 08:11

score 3 · Accepted Answer · answered Mar 02 '20 at 08:36

There are 2 solutions :

1- Add an extra box like below and set the visibility of the last box to hidden :

<div class="unit"></div>
.unit:last-child {
  visibility: hidden;
}

2- Use CSS Grid :

.unit-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;            
}

If the boxes gonna be dynamic, the flexbox may not a good option for this case.

eye-wonder · Answer 2 · 2020-03-03T08:54:11.497

Here is a quick example:

.units {
  display: flex;
  flex-wrap: wrap;
  margin-right: -2em;
}

.unit {
  flex: 1 0 500px;
  box-sizing: border-box;
  margin: .5rem .25em;
  background: #28a74520;
  border-radius: 5px;
  max-width: calc(25% - 1rem);
  padding: 1rem;

}

<div class="units">
  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto ABC
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

  <div class="unit">
    <p>
      Auto
    </p>
    <p>
      test
    </p>
  </div>

</div>

(You can also use Media queries to have different number of columns on different screen sizes)

Need to avoid spacing from justify-content: space-between of last complete row after flex wrap of child divs

2 Answers2