Последние блоки в сетке flexbox растягиваются, как предотвратить?

Question

[lavezzi1]

Здравствуйте! Есть фиксированный по ширине контейнер. Есть блоки, flex-flow: row wrap. Короче сетка. Но если допустим, два блока или еще хуже один переносится на на новую строку, это как правило последний. Я думаю это из за того, что у меня к блокам свойство flex: auto применено. Можно как то задать максимальную ширину? Чтобы сетка была резинова, но в то же время блоки не расползалить на всю страницу? Спасибо

Живой пример: jsfiddle.net/w7Lw0pc4

Нужно: чтобы блоки имели максимальную ширину, тянулусь (заполняли контейнер) до максимальной ширины если нужно. И чтобы последний блоки не растягивались как на примере. Возможно?

Comments

[Кирилл]

Залейте код в какую-нить песочницу. Мне пока не понятно, что вы хотите получить в итоге.

[lavezzi1]

ОБновил пост

[Дмитрий Христоев]

max-width: 200px; width: 100%;

Answer 1

[Александр Пупкин]

.item {
    flex-wrap: auto;
    width: 200px;
    height: 200px;
    background: #ddd;
    margin: 5px;
}

По моему правильней будет:

.item {
    flex-wrap: wrap ;
    width: 200px;
    height: 200px;
    background: #ddd;
    margin: 5px;
}

Comments

[lavezzi1]

У меня такого в коде нет

[Александр Пупкин]

Что нет в коде??? Замените в вашем коде, класс .item, на то что выше (лучше 2 код)

[lavezzi1]

Александр Пупкин: ЛОЛ. Это свойство применяется к flex контейнеру, а не к детям.

[Александр Пупкин]

ой плять, точно. Удали из .item - flex: auto;

[lavezzi1]

Александр Пупкин: Так они тогда подстраиваться под размер контейнера не будут, так?

[Александр Пупкин]

ну да. будут аккуратненько слево.

[lavezzi1]

Александр Пупкин: Это плохо. Неужели нет способа :(

[lavezzi1]

Александр Пупкин: не вижу изменений

[Александр Пупкин]

ul {
list-style: none;
padding: 0;
}
.grid {
width:100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

.item {
width: 200px;
height: 200px;
background: #ddd;
margin:10px auto;
}

[Александр Пупкин]

да я уже сам запутался =) с вашими flexami :D

[Александр Пупкин]

ну что, так сойдет?

[lavezzi1]

Александр Пупкин: Нет, блоки по центру внизу не в тему :(

[Александр Пупкин]

Ну последнее что могу предложить....

ul {
list-style: none;
padding: 0;
}
.grid {
width:880px; /* 70%; */
display: flex;
flex-flow:row wrap;
margin:10px auto;
}

.item {
width: 200px;
height: 200px;
background: #ddd;
margin:10px;
}

Если фиксированная ширина, то чем меньше, то ни чего не будет. Если указывать в % ширину .grid, то при уменьшении использовать @media-query...

Больше не знаю. Не задрот =\