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

Issue

I have an unordered list with a variable amount of items which I am treating as buttons (sort of like a navbar). I would like the "buttons" to have the following behavior:

• Have a minimum width (for the moment I have concluded that min-width: 150px; is a good number for my purposes).
• 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).
• The "buttons" should ideally stretch in width to span the full width of the container, creating a rectangle of buttons.
• The corners of the aforementioned rectangle to be rounded, so the whole setup looks like one large rounded rectangle.
• Have the "buttons" display in order.

Here is a trimmed down version of my attempt:

.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>

This fits most of the criteria, but the rounded corners are hard-coded and do not adapt well to differing amounts of "buttons" or shrinking windows (when I was creating the code snippet, the third "button" was in its own row and now it is not. Shrinking the window so the third "button" spills to its own row will yield my intended effect). It also does not "evenly" split the "buttons" amongst the rows, as if there were 8 "buttons" but room for only 7, the eighth would be alone in a second row.

Solution

You honestly weren't too far off, just needed to shuffle the styling around some. This doesn't check every box you had, e.g.

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).

this is absolutely doable, but would require some javascript to implement as well as using grid instead so you can have finer control over rows and columns.

/*
  - 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>

Answered By - MapleDev