Как сделать так, чтобы гибкие элементы расширялись до доступной ширины до 4 элементов в строке?

Question

У меня есть контейнер flexbox, и я хотел бы, чтобы элементы в контейнере использовали столько ширины, сколько им нужно, чтобы заполнить всю ширину строки. Но я также хотел бы сделать так, чтобы в каждом ряду могло быть только 4 предмета. Поэтому, если в контейнере был 1 элемент, я хочу, чтобы он занимал 100% ширины, 2 элемента по 50% каждый, и т. Д. c. до 4 элементов на 25%. Как я могу это сделать?

.container {
  width:800px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}

.container > .item {
  min-width:25%;
  margin-left:10px;
}
  .container > .item:first-child, .container > .item:nth-child(5n) {
  margin-left:0;
  }

<h4>3 elements - should be 33% width each</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50">
</div>
</div>

<h4>5 elements - should be 25% width each and wrap</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50">
</div>
<div class="item"><img src="http://placehold.it/250x50">
</div>
<div class="item"><img src="http://placehold.it/250x50">
</div>
</div>

Answer 1

Используйте свойство flex-grow, чтобы использовать свободное пространство (если имеется менее четырех элементов), и свойство flex-basis, чтобы обеспечить максимум четыре элемента в строке.

.container {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 20%;     /* fifth item will wrap because of left margin;
                        lots of leftover free space for margins */
  overflow: auto;    /* intrinsic size of 4 images is wider than container */
}

.item + .item {
  margin-left: 10px; /* applies only to items preceded by an item */
}

.item:nth-child(5n) {
  margin-left: 0;
}

<h4>3 elements - should be 33% width each</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
</div>

<h4>5 elements - should be 25% width each and wrap</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
</div>

Answer 2

Вы можете использовать правило изгиба и сделать ширину внутри каждого изгиба равной 100%:

.container {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.container > .item {
  flex: 1 0 25%;
}

.container>.item img{
  width: 100%;
}

<h4>3 elements - should be 33% width each</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50">
  </div>
</div>

<h4>5 elements - should be 25% width each and wrap</h4>
<div class="container">
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
  <div class="item"><img src="http://placehold.it/250x50"></div>
</div>