Mittelausrichtung mit Flex-Box ohne leere Räume ⇐ CSS

[Anonymous]

Hallo allerseits , ich arbeite gerade an einem Notizprojekt, ich bin versuche, meine Notizen mit Flex -Box ohne nutzlose Räume zu zentrieren. /> Der untere Platz ist in Ordnung , das Problem ist der -Raspekt, der durch Flex -Box auf der rechten Seite verursacht wird. Ich möchte, dass die gelbe Box die Größe und das Fit, aber auch bei zentriert bleiben. Header )

Code: Select all

.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;
}

Hier ist die HTML -Codes : (Entschuldigung, es ist nicht sauber)

Code: Select all

Dashboard

[list]
[*]
 title 
 Content 
 date 

[url=/modify/folders]

[img]/icons/folder.svg[/img]

[/url]
[url=/note/add]

[img]/icons/pen.svg[/img]

[/url]