I am currently working on creating a horizontal list of items:
https://i.sstatic.net/fu89D.png
My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space.
https://i.sstatic.net/we2QM.png
While I have successfully created the list of items, I am unsure of the best approach to achieve the desired behavior. Here is the code I am currently using:
I would greatly appreciate any help or advice on how to move forward in the right direction. Thank you!
/* layout */
.container {
display: flex;
overflow-x: auto;
gap: 21px;
}
.item {
min-width: 212px;
height: 254px;
}
/* visuals */
.container {
padding-left: 11px;
}
.item {
background: #D9D9D9;
}
.item.green {
background: #099F9F;
}
.item.red {
background: #FF6262;
}<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item green"></div>
<div class="item red"></div>
</div>