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

Question

[spone379]

Доброго времени суток. Есть вот такой вот код: codepen.io/anon/pen/PNNaRW
Как мне сделать так, чтобы блоки всегда были прижаты к краю контейнера(первые к левому, последние, к правому), и блоки оставались адаптивными без использования медиа-запросов? Блоки не должны менять размеры.

Answer 1

[Виталий Чернильцев]

codepen.io/anon/pen/pyyZEG
Так? Если да, то используй флексбоксы frontender.info/a-guide-to-flexbox

Comments

[spone379]

codepen.io/anon/pen/aNNjLN вот так, но если сузить экран, то сетка сломается, поэтому это неправильно

[Виталий Чернильцев]

spone379: codepen.io/anon/pen/pyyZEG не то свойство я указал
нужно было justify-content: space-between, а я делал space-around

Answer 2

[Cyber_bober]

Не совсем понятно, что вы хотите. Что есть первые что есть последние? Каким образом прижаты? Что вы имеете ввиду под адаптивностью? Если вы хотите резиновый макет, то без ширины в процентах не обойтись

Comments

[spone379]

первые 一 те, что слева(первые в строке), последние 一 те, что справа(последние в строке). Прижаты 一 нет отступов. Адаптивность 一 когда я сужаю экран и три блока не помещаются, то в строке станет 2 блока уже, потом один. Сейчас этот код адаптивный, но мне нужно то, что я написал в вопросе

Answer 3

[Валерий Серов]

может так поможет, но все же я бы разделил блоки по 3 в этом случае

.wrapper{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  background: red;
  text-align:center;
  padding:5px 0 0;
  text-align: justify;
}
.wrapper:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.block{
  display:inline-block;
	min-width:180px;
	max-width:180px;
  height:130px;
  background: #000;
}