Center alignment using flex-box without empty spaces

Question

Hi everyone, i'm currently working on a note project, i'm trying to center my notes using flex box without any useless spaces, take a look at the photos you will understand what i mean .

bottom space is just fine, the problem is the space that is caused by flex box on the right side , i want the yellow box to resize and fit but stay centered as well, the yellow box is a ul tag and the red boxes are li tags.

here is the css styles : ( container includes the whole page except the header )

.container {
  width: 100%;
  display: flex;
  height: 100vh;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

ul {
  align-content: flex-start;
  margin: 40px auto;
  max-width: 1400px;
  width: fit-content;
  height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-y: scroll;
  margin-top: 100px;
  border: 3px solid yellow;
}

ul li {
  border: 2px solid red;
  list-style-type: none;
  font-size: 20px;
  margin: 5px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(10px);
  width: 330px;
  height: 200px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  transition: height 0.3s;
}

here is the HTML codes : ( sorry it's not clean )

<title>Dashboard</title>

<div class="container">
  <ul>
    <li class="item">
      <div class="priority"></div><span class="title c-title"> title </span>
      <span class="content c-content"> Content </span>
      <span class="date"> date </span>

      <div class="item_buttons">
        <a href=""><button class="detail faint_color"><img class="edit-icon" src="/icons/invisible.svg" alt="see icon"></button></button></a>
        <a href=""><button class="detail faint_color"><img class="edit-icon" src="/icons/edit.svg" alt="edit icon"></button></button></a>
        <a href=""><button class="deleteButton detail faint_color"><img class="edit-icon" src="/icons/trash.svg" alt="delete icon"></button></a>
      </div>
    </li>
  </ul>
</div>

<div class="addButton">
  <img class="addButtonImage" src="/add.svg" alt="add new note" />
  <div class="smallMenu hide">
    <a href="/modify/folders">
      <button class="folders_button"><img src="/icons/folder.svg" alt="folder icon"></button>
    </a>
    <a href="/note/add">
      <button class="addNote_button"><img src="/icons/pen.svg" alt="pen icon"></button>
    </a>
  </div>
  </div>

Answer 1

There's a number of solutions for this one, depending which way you want to go,

If the notes don't have to be exactly 330px wide, you can achieve removing the gaps by replacing:

width: 330px;

with

flex: 200px;

This takes advantage of the fluid responsiveness of flexbox.

One issue with this flex solution is the 'leftover' element upon wrapping: e.g. with three elements across, the fourth will wrap and grow to the full width of the parent:

To get around this with flex, you would need to either:

1. change flex to something like flex: 0 1 50%; with percentage values and flex-grow disabled, which means you would need @media queries to give the lists the fluidity they had before
2. use a JavaScript solution to dynamically set the width of the last element based on the other lists (like @SnoopFrog's answer)

---

If you do need the notes to be 330px wide, I would set the parent <ul> to have a set size twice that of the lists width: 785px; and ensure that justify-content: center;

---

Alternatively, turning to CSS grid or a simple inline-block method may fit your needs but both would need @media queries for responsivity.