Как сделать ровную витрину?

Question

[Енот Енотов]

как сделать так , что бы блоки шли последовательно?
слева направо, не нравится что внизу они как бы центрируются.

.content .items {
    padding:5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}




.items .item {
    margin:5px;
   width:200px;
    height: 200px;
    border:1px solid  gray;
}

Comments

[Андрей Федоров]

flex-wrap что по вашему делает?

[Денис Букреев]

Дак а зачем ты их вообще центрируешь?

Answer 1

[Милок Мурлыка]

Используйте
flex-wrap: wrap;
Пример
https://jsfiddle.net/mmurlyka/t6eu2o82/

Comments

[Енот Енотов]

Милок Мурлыка а вот такую штуку никак не побороть средставами флекса? f3.s.qip.ru/etSMz7ZC.png , нет ли там какого-нибудь автомаштабирования?

[Енот Енотов]

или тут все равно придется медиа запросы юзать как не крути

[Дмитрий]

Енот Енотов: юзать % вместо px? 16.6666% и 6 блоков всегда будут в ряд.

Answer 2

[Андрей Верх]

В flex'е не предусмотрено выравнивание последней строки. Так что откажитесь от justify-content: space-around;

Или используйте другие способы выравнивания сетки. Float'ы, inline блоки и т.д. Это будет проще чем искать какие-то хаки.

Answer 3

[Дмитрий Матвеев]

Можно сделать, например, вот так https://jsfiddle.net/t6eu2o82/1/