Flexbox row layout with ul followed by input-CodePudding

I have a layout with an unordered list followed by an input element. I would like the layout to be one continuous row, where the input would be right after item 5. It would also determine if the minimum width of the input would allow it to go right after item 5, or if it needs to go on the next line of the row.

I could obviously achieve this by putting the input in the ul, and I could also change the ul to be a bunch of divs, but all of this takes away from the semantics. How would I achieve what I want with Flexbox?

div {
  display: flex;
  width: 160px;
  flex-wrap: wrap;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>

CodePudding user response：

display: contents; on the ul then flex:1 for the input

div {
  display: flex;
  width: 160px;
  flex-wrap: wrap;
}

ul {
  list-style: none;
  display: contents;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
  flex: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>

CodePudding user response：

Remove the width and use inline-flex and the container will only be as wide as it needs to be.

div {
  display: inline-flex;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>

CodePudding user response：

I'd use flex-flow: row nowrap; so the items are arranged in a single row but would cause the container to overflow unless you set a max width to each li.

div {
  display: flex;
  width: 160px;
  flex-flow: row nowrap;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-flow: row nowrap;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>