Flexbox: Как растянуть элементы Row до полной ширины? ⇐ CSS

[Anonymous]

I have a flexbox grid of random width images:




I would like to stretch elements of each row to full width in order to get rid of white-space - how can I achieve that с CSS?

Код: Выделить всё

justify-content

, похоже, не очень помогает. Я прочитал о некоторых методах JavaScript, но я хотел бы избежать их, если это возможно. PrettyPrint-Override ">

Код: Выделить всё

.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid .grid-item {
width: auto;
display: inline-block;
vertical-align: bottom;
float: none;
margin: 1px;
overflow: hidden;
}
.grid .grid-item .grid-in {
padding: 0;
width: auto;
height: 190px;
vertical-align: bottom;
}
.grid img {
max-width: 100%;
width: 100%;
height: auto;
padding: 0;
}< /code>



[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/100x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/100x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/100x190[/img]

Подробнее здесь: https://stackoverflow.com/questions/316 ... full-width