I'd like to do either of these options:
I'm using a flex-wrap: wrap container to display a bunch of items of equal size. Except the 1st item, which is larger than the rest.
I'm able to vertically bottom-align the 1st item with the rest of its row using align-items: end. But I'd like to also horizontally align the 1st row with the below rows. If I use margin-right: auto on the 1st element, it pushes the rest of the 1st row too far to the right. I'd like to not hardcode a margin value, since the exact width of the elements is a messy computation with 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></div></div>