One of my challenges involves choosing between two options: https://i.sstatic.net/JpWiGfW2.png
In my project, I am utilizing a container with flex-wrap: wrap to showcase items of equal dimensions. However, the first item in this container stands out due to its larger size compared to the rest.
I have succeeded in aligning the first item vertically at the bottom alongside the other items within its row by implementing align-items: end. Nevertheless, my objective is to achieve horizontal alignment for the first row as well as the subsequent rows below it. When attempting to employ margin-right: auto on the initial element, it leads to an excessive push towards the right for the remainder of that particular row. Moreover, I prefer not to hardcode a margin value since determining the exact width of elements can be intricate owing to factors like padding and borders (e.g., 360.831).
.container {
border: 3px solid black;
display: flex;
flex-wrap: wrap;
align-items: end;
width: 250px;
height: 250px;
overflow: hidden;
}
.container div {
border: 3px solid orange;
width: 50px;
height: 50px;
}
.container div:nth-child(even) {
border: 3px solid blue;
}
.container .large {
width: 75px;
height: 75px;
/* float: right; float doesn't work in flex */
/* margin-right: auto; pushes the rest of the row too the edge of the container */
/* margin-right: 29.53400px; requires JS to figure out the exact computed border thickness */
}<div class="container">
<div class="large"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>