Верстка float, max-min-width. Я дурак, или шины не едут?

Question

[Pashevka]

Здравствуйте все. Вопрос такой. Есть контейнер с блоками. Выглядит так:

<div class="container">
		<div class="b1 block">
			
		</div>
		<div class="b2 block">
			
		</div>
		<div class="b3 block">
			
		</div>
		<div class="b4 block">
			
		</div>
	</div>

Блоки должны быть в пределах, например, от 200 до 400 пикселей. То есть max-width: 400px; min-width: 200px;
Все блоки float-left
Никак не могу сделать так, чтобы в момент перепрыгивания последнего блока на новую строку все блоки растягивались до 400 пикселей.
То есть изначально в строку помещаются все 4 блока (4*400=1600px)
Я начинаю сжимать экран, и все блоки сжимаются до размеров 200px
Если я сжимаю еще сильнее, 1 блок перепрыгивает вниз, а остальные 3, которые остались на первой строке, также остаются по 200px, а надо чтобы они на ширину экрана растянулись до 400px, ну или сколько там полезет.
Надеюсь, что вы поймете, что я пишу

Answer 1

[CODALSD]

.container {
  display: flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
.block {
  min-width: 200px;
  max-width: 400px;
  height: 40px;
  background: #456;
  margin:10px;
  flex-grow: 1;
  
}

flex-grow ключевое свойство

Comments

[Pashevka]

Ты что блять, боженька чтоли? Спасибо тебе огромное!!!!!