CSS flex on last row

Question

I have just started learning flexbox in CSS and I am not sure how to align the items on the last row. As I resize the browser, the last row seems to always be space-between too and I want them flushed to the left with the same gap (like a flex-start) as the other rows above. How can I fix this? I've tried searching for answers but did not manage to find any. I want the items to be inside a width of 80% of the browser viewport and both gaps on the ends must be filled.

<div class="container">
<ul class="skills_list">
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
</ul>
</div>

.container {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}

.skills_list li {
  list-style: none;
  background-color: yellow;
  width: 15%;
  padding: 10px;
  margin-top: 10px;
  margin-left: 5px;
}

This not possible with flex-box, but I'm sure someone will post an answer with a solution using Grid. — André, Jul 29 '23 at 06:07
@André I think you are right! I was looking for a possible solution with flexbox but seems like grid is the answer. Thanks! — Jessica, Jul 29 '23 at 10:25

Nags · Answer 1 · 2023-07-29T06:09:32.957

1

Issue is you used justify-content: space-between; in .skills_list

output of using justify-content: space-between

To fix the above issue, use justify-content: flex-start; in .skills_list then below is the output output of using justify-content: flex-start

edited Jul 29 '23 at 06:09

answered Jul 29 '23 at 06:07

Nags

19
2

Or just remove the `justify-content` declaration since it defaults to start behavior. – Tim R Jul 29 '23 at 06:42
This does not work because `justify-content: flex-start` will flex the items to the start of the container and not extend them to the end of the container like `justify-content: space-between` did. – Jessica Jul 29 '23 at 14:34

CSS flex on last row

1 Answers1