Равномерно распределить произвольное количество элементов в строках

Question

Мне нужно добиться равномерного распределения таблеток внутри div для всех 4 основных размеров экрана, используя flexbox. Чем меньше размер экрана, тем меньше делений нужно разместить в одной строке. Остальные элементы div должны быть размещены в следующем ряду. Количество распространяемых элементов не известно заранее. Каждая таблетка получит слово внутри, поэтому необходима минимальная гарантированная ширина. Вот картина того, как может выглядеть результат для экрана разных размеров для одной строки. Как мне сделать что-то подобное?

Answer 1

как то так:

.row {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding-bottom: 12px;
}

.pill {
  min-width: 50px;
  max-width: 200px;
  margin-right: 12px;
  margin-bottom: 12px;
  text-align: center;
  padding: 6px;
  border: 2px solid;
  border-radius: 50%;
  flex: 1 0 0;
}

.pill:last-child {
  margin-right: 0;
}

<div class="row">
  <div class="pill">foo</div>
  <div class="pill">bar</div>
  <div class="pill">foobar</div>
  <div class="pill">foo</div>
  <div class="pill">bar</div>
  <div class="pill">foo</div>
  <div class="pill">bar</div>
  <div class="pill">foobar</div>
  <div class="pill">foo</div>
  <div class="pill">bar</div>
</div>

<div class="row">
  <div class="pill">foo</div>
  <div class="pill">bar</div>
  <div class="pill">foobar</div>
  <div class="pill">foo</div>
  <div class="pill">bar</div>
</div>

<div class="row">
  <div class="pill">foo</div>
  <div class="pill">bar</div>
  <div class="pill">foobar</div>
</div>

<div class="row">
  <div class="pill">foo</div>
</div>

Вы можете настроить минимальную и максимальную ширину таблеточных элементов в соответствии с вашими потребностями.