Solución:
los justify-content La propiedad utiliza el espacio disponible en la línea para colocar elementos flexibles.
Con justify-content: space-between, todo el espacio disponible se coloca entre el primer y el último artículo, empujando ambos artículos hacia los bordes opuestos del contenedor.
Tu escribiste:
Me preguntaba cómo justificar cuánto espacio se permite en
justify-content: space-betweenpara flexbox.
Con space-between en la dirección de la fila, tendría que controlar el ancho del contenedor flexible. Entonces, si desea que haya menos espacio entre los elementos flexibles, deberá acortar el ancho del contenedor.
O podrías usar justify-content: space-around.
Sin embargo, estas soluciones no son óptimas.
La forma correcta de hacerlo sería utilizar márgenes.
Tu escribiste:
Actualmente, mis elementos están espaciados pero tienen demasiado espacio entre ellos, quiero solo un poco de espacio entre ellos para que puedan asentarse en algún lugar en el medio de una fila.
Usar justify-content: center luego use márgenes para espaciarlos.
Me encuentro agregando margen derecho a todas las casillas (en este caso tres)
.three {
margin-right: 2%
}
y luego deshacerse de él para que el último cuadro se alinee correctamente
.three:nth-child(3) {
margin-right: 0%;
}
pero cada vez que hago esto pienso “tiene que haber una mejor manera, algo horneado en flex-box … esto funciona pero parece una solución alternativa?”
El enfoque con el uso de márgenes no es una solución universal si lo desea space-between, porque establecería un margen en todos los elementos flexibles, también en el primer y último elemento de una línea o columna. Utilizando :first-child / :last-child/ :nth-child() selector no ayuda cuando flex-wrap: wrap está establecido, porque nunca se puede saber qué elementos serán el primero y el último en una línea o columna ajustada.
Un selector como :wrapped Sería útil, pero lamentablemente no existe.
Así que mi conclusión es que cuando realmente quieres dar rienda suelta a la flexibilidad y la capacidad de respuesta de la caja flexible, no puedes controlar los márgenes … Oportunidad perdida de la especificación, diría yo.