Necesito mostrar 2 artículos por línea, usando el cuadro Responsive Flex

Creo que sé lo que está buscando, avíseme si me equivoco y puedo eliminar esta respuesta o editarla para embellecer aún más cuál puede ser su intención.

Esto se puede lograr utilizando un min-width calculado en sus flex-children flexibles junto con flex-grow .

Por ejemplo, si ha restablecido el margen y el relleno y sabe que no hay nada oculto para tratar, entonces puede calcular un espacio o margen de separación entre los elementos junto con un porcentaje en los elementos secundarios flexibles . A continuación, uso una matriz impulsada por Javascript para iterar y simular su problema de una cantidad dinámica de cadenas. Agrego un flex-wrap: wrap; junto con un gap de 1em en el elemento padre => flex parent , y luego agregue un flex-grow de 1 , junto con un min-width: calc(50% - 1em) . Entonces flex-grow: 1 le dice a css cuánto del espacio restante en el contenedor flexible debe asignarse al elemento, luego min-width: calc(50% - 1em) le dice a css que el ancho mínimo del elemento debe ser 50 % del ancho de los padres menos el tamaño del gap de 1em . Entonces, básicamente, esto solo permitirá que dos elementos ocupen el espacio de cada fila de padres flexibles, luego los padres flex-wrap: wrap se hacen cargo y envuelven su siguiente elemento a la siguiente fila o línea .

 const parent = document.querySelectorAll('.parent') const target = parent[0]; const arr = ['first list item', 'second list item', 'third list item', 'fourth list item', 'fifth list item', 'sixth list item', 'seventh list item', 'eigth list item', 'ninth list item'] arr.forEach(val => { let child = document.createElement('DIV') child.classList.add('children') child.textContent = val target.append(child) })

 * { padding: 0; margin: 0; } .parent { display: flex; flex-wrap: wrap; gap: 1em; } .children { display: flex; justify-content: center; flex-grow: 1; min-width: calc(50% - 1em); background-color: green; height: 2em; }

 <div class="parent"> </div>

Use flex-basis para asegurarse de obtener dos elementos flexibles por línea flexible, luego useflex-grow para permitir que llenen el espacio disponible restante.

flex-basis es la propiedad que permite que los elementos flexibles "indiquen" al contenedor flexible qué tan grandes les gustaría ser. Puede especificarlo como un valor de px fijo o puede especificar un porcentaje. El porcentaje se refiere al tamaño interno del contenedor flexible.

El contenedor flexible (su elemento ul ) tomará cada elemento, observará su flex-basis y los colocará en una línea flexible si todavía caben. Por ejemplo, si establece flex-basis: 50% , puede colocar dos artículos por línea, y el artículo después de esos dos tendrá que ir en su propia línea.

El desafío es que si usa el gap en su contenedor flexible para tener algo de espacio entre los elementos flexibles, eso podría empujar sus elementos flexibles a una nueva línea. Por ejemplo, su primer elemento flex-basis: 50% , luego tiene un espacio de 20 px y el segundo elemento flex-basis: 50% ya no encajará.

Dos posibles soluciones :

• tenga en cuenta manualmente la gap cuando configure su flex-basis . Por ejemplo, si tiene gap: 10px , podría configurar flex-basis: calc(50% - 10px)
• proporcione a sus elementos flex-basis que garantice solo dos elementos flexibles por línea flexible, pero que deje suficiente espacio para la gap . Luego deje que los elementos flexibles crezcan para llenar el espacio restante en la línea flexible. Por ejemplo, sus dos elementos flex-basis: 35% sumará un 70 %, luego su gap aumentará un poco y el ~30 % restante es casi definitivamente suficiente para acomodar la gap , a menos que sea realmente enorme

Aquí hay una solución de trabajo usando esa segunda idea:

 ul { list-style-type: none; padding: 0; } .flex-container { display: flex; flex-wrap: wrap; gap: 20px; } .flex-item { flex-grow: 1; flex-shrink: 0; flex-basis: 35%; } .flex-item:nth-child(odd) { background-color: whitesmoke; } .flex-item:nth-child(even) { background-color: burlywood; }

 <ul class="flex-container"> <li class="flex-item">Item 1</li> <li class="flex-item">Item 2</li> <li class="flex-item">Item 3</li> <li class="flex-item">Item 4</li> <li class="flex-item">Item 5</li> <li class="flex-item">Item 6</li> <li class="flex-item">Item 7</li> <li class="flex-item">Item 8</li> <li class="flex-item">Item 9</li> <li class="flex-item">Item 10</li> </ul>

<ul class="flex flex-wrap gap-6" style="width: 50%; flex-basis: 100%"> @foreach($notes as $note) <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-4"> <div class="flex p-6 bg-white border-b border-gray-200" style="width: 100%"> <div class="box"> {{ $note->actual_date }} </div> <div class="box"> {{ $note->getNoteAsHTML() }} </div> </div> </div> @endforeach