如何创建 "button array" 具有相对均匀的行和拉伸按钮？

Question

我有一个无序列表，其中包含数量可变的项目，我将其视为按钮（有点像导航栏）。我希望“按钮”具有以下行为：

有一个最小宽度（目前我得出的结论是 min-width: 150px; 对我来说是一个很好的数字）。
如果“按钮”的数量溢出到 n 行，我希望“按钮”的排列在 n 行，每行的“按钮”数量大致相等（例如，四行中的 10 个“按钮”将导致两行有 3 个“按钮”，两行只有 2 个）。
理想情况下，“按钮”应在宽度上拉伸以跨越容器的整个宽度，从而创建一个按钮矩形。
前面提到的矩形的角被圆化，所以整个设置看起来像一个大圆角矩形。
按顺序显示“按钮”。

这是我尝试的精简版：

.bar {
    padding: 10px;
    border: 2px solid #000000;
    min-width: 150px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    flex: 1 0 auto;
}

#foo {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 10px;
}

#foo1 {
    border-radius: 20px 0px 0px 0px;
}

#foo2 {
    border-radius: 0px 20px 0px 0px;
}

#foo3 {
    border-radius: 0px 0px 20px 20px;
}

<ul id="foo">
    <li id="foo1" class="bar">Text</li>
    <li id="foo2" class="bar">Text</li>
    <li id="foo3" class="bar">Text</li>
</ul>

这符合大多数标准，但圆角是硬编码的，不能很好地适应不同数量的“按钮”或缩小 windows（当我创建代码片段时，第三个“按钮”在它自己的行中，现在它不是。缩小 window 所以第三个“按钮”溢出到它自己的行将产生我预期的效果）。它也不会“均匀”地将“按钮”分成几行，就好像有 8 个“按钮”但空间只有 7 个，第八个将单独排在第二行。

Answer 1

老实说，您离得并不远，只是需要调整一些样式。这不会选中您拥有的每个框，例如

If the amount of "buttons" were to spill into n rows, I would like the arrangement of the "button" to be in n rows with a roughly equal number of "buttons" per row (e.g. 10 "buttons" in four rows would result in two rows having 3 "buttons" and two having only 2).

这绝对可行，但需要一些 javascript 来实现以及使用网格来代替，这样您就可以更好地控制行和列。

/*
  - Removed padding on list
  - simplified flex value for items
  - Removed borders from items
  - Removed border radius from items
  - Added background colors to items & list
  - Added border to list
  - Added gap to list to give the appearance of internal borders
  - Added border Radius & overflow: hidden; to list, rounding outer corners
*/

.bar {
  background: #efefef;
  padding: 10px;
  min-width: 150px;
  height: 10px;
  text-align: center;
  line-height: 10px;
  flex: 1;
}

#foo {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  background: #000;
  border: 2px solid #000;
  gap: 2px;
  border-radius: 20px;
  overflow: hidden;
}

<ul id="foo">
  <li class="bar">Text</li>
  <li class="bar">Text</li>
  <li class="bar">Text</li>
  <li class="bar">Text</li>
  <li class="bar">Text</li>
</ul>

如何创建 "button array" 具有相对均匀的行和拉伸按钮？

How to create "button array" with relatively even rows and stretched buttons?

css

css-selectors

flexbox