将任意数量的 div 均匀分布在 div 的行中

Question

我需要使用 flexbox 为所有 4 种主要屏幕尺寸在 div 内实现药片的均匀分布。屏幕尺寸越小，适合单行的 div 就越少。其余的 div 应放在下一行。事先不知道要分发的 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>

您可以根据需要调整药丸元素的最小和最大宽度。