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>