Estaba usando el espacio entre / espacio de manera uniforme para tratar de tener el mismo espacio entre los elementos y funciona bien. Lo que estoy tratando de hacer es reducir el espacio entre ellos después de dividirlos uniformemente. No pude encontrar ninguna solución de trabajo. Probé la altura de línea y manipulé el margen, pero no funcionó. ¿Es posible reducir el tamaño después de espaciar los elementos de manera uniforme? Si no existe, ¿cuál es la forma correcta de espaciar los elementos de manera uniforme y también controlar su espaciado? Cualquier ayuda es apreciada. Gracias por adelantado.
Nota: ¡Quiero que los elementos floten hacia la derecha o hacia la izquierda sin estar centrados!
Además, este es el único enlace SO que pude encontrar sobre esto: Cómo reducir el espacio entre elementos en flexbox justificar-contenido: espacio-entre
.leftHeaderItems { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; position: absolute; right: 0%; width: 100%; height: 7%; margin: 0px; background: green; } <div class="leftHeaderItems"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>Actualización: Además, probé la propiedad gap como lo sugirió @mianbato por No puedo entender cómo configurar elementos en una fila, no en una columna.
.leftHeaderItems { display: grid; justify-content: space-evenly; align-items: center; position: absolute; left: 0%; width: 30%; height: 100%; grid-row-gap: 3px; background: inherit; } <div class="leftHeaderItems"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>Puede probar con display: grid y luego ajustar el espaciado con grid-gap que he configurado en 12px
.leftHeaderItems { align-items: center; position: absolute; right: 0%; width: 100%; height: auto; margin: 0px; background: green; justify-content: center; grid-column: 1 / -1; display: grid; grid-gap: 12px; grid-template-columns: repeat(5, auto); flex-direction: column; margin: 0; } <div class="leftHeaderItems"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>Cuando usa space-evenly eso significa que desea que el navegador calcule y aplique el distanciamiento por usted.
Si desea controlar el espacio entre los elementos, use column-gap .
Puede controlar la alineación horizontal usando align-content en el elemento contenedor:
| alinear-contenido | resultado en LTR | resultado en RTL |
|---|---|---|
| centro | centrado | centrado |
| arranque flexible | izquierda | Correcto |
| extremo flexible | Correcto | izquierda |
.leftHeaderItems { background: green; display: flex; column-gap: 12px; flex-direction: row; } <div class="leftHeaderItems"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>Uso de la propiedad flex y gap de display
.leftHeaderItems{ display: flex; flex-direction: row; align-items: center; gap:1rem; height: 7%; padding-left: 1rem; background: green; } <div class="leftHeaderItems"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>