Tengo un diseño con una lista desordenada seguida de un elemento de entrada. Me gustaría que el diseño fuera una fila continua, donde la entrada estaría justo después item 5 . También determinaría si el ancho mínimo de la entrada le permitiría ir justo después item 5 , o si necesita ir a la siguiente línea de la fila.
Obviamente, podría lograr esto poniendo la entrada en ul , y también podría cambiar ul para que sea un montón de divs, pero todo esto quita la semántica. ¿Cómo lograría lo que quiero con 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>display: contents; en el ul entonces flex:1 para la entrada
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>Elimine el ancho y use inline-flex y el contenedor solo será tan ancho como debe ser.
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>flex-flow: row nowrap; por lo tanto, los elementos se organizan en una sola fila, pero provocarían que el contenedor se desborde a menos que establezca un ancho máximo para cada 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>