Estaba usando el espacio entre / espacio de manera uniforme para intentar 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 funcional. Probé la altura de la 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. Se agradece cualquier ayuda. Gracias por adelantado.

Nota: quiero que los elementos floten hacia la derecha o hacia la izquierda sin centrar.

Además, este es el único enlace SO que pude encontrar sobre esto: Cómo reducir el espacio entre elementos en flexbox justify-content: space-between

Quien votó negativamente, ¿POR QUÉ?

.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 sugiere @mianbato por No puedo averiguar cómo establecer 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>
0
seriously 27 nov. 2021 a las 11:46
space-evenly significa que el navegador controla esto. ¿Qué estás tratando de lograr exactamente?
 – 
connexo
27 nov. 2021 a las 11:52
¿ha probado con la propiedad gap?
 – 
mianbato
27 nov. 2021 a las 11:53
Elementos espaciales uniformemente y también controlar su espaciado es lo que necesita
 – 
seriously
27 nov. 2021 a las 11:56
Eso es una contradicción.
 – 
connexo
27 nov. 2021 a las 12:03
Intenté que no funcionó, eche un vistazo a la actualización anterior
 – 
seriously
27 nov. 2021 a las 12:03

4 respuestas

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>
1
Authentic Science 27 nov. 2021 a las 12:03

Uso de la propiedad display flex y gap

.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>
1
mianbato 27 nov. 2021 a las 12:11
Esto es lo que necesitaba gracias
 – 
seriously
27 nov. 2021 a las 12:14
Si esto es lo que querías, hiciste un trabajo horrible al explicar lo que necesitas.
 – 
connexo
27 nov. 2021 a las 12:14
Cómo exactamente mejorar @connexo
 – 
seriously
27 nov. 2021 a las 12:14
" [...] funciona bien. Lo que estoy tratando de hacer es reducir el espacio entre ellos después de dividirlos uniformemente [...] " Luego ejecute su fragmento. Mi respuesta es la única de las 5 que hace lo que me pide. Sin decir palabra, dijiste que no los querías centrados. Dijiste que funciona bien y estoy tratando de reducir el espacio entre ellos .
 – 
connexo
27 nov. 2021 a las 12:15
Dije específicamente algo relacionado con el espacio de manera uniforme y el espacio de manera uniforme nunca centra los elementos en div. Puede agregar una edición a mi pregunta en dónde me equivoqué @connexo
 – 
seriously
27 nov. 2021 a las 12:18

Puede usar 'justify-content: center' y luego usar 'flex-base: [some-value]' para ajustarlo a sus necesidades;

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-basis: 0;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

.leftHeaderItems > p {
  flex-basis: 90px;
}
0
VahidM 27 nov. 2021 a las 12:14
Hay valores como 'max-content', 'min-content', 'fit-content' para usar en 'flex-base';
 – 
VahidM
27 nov. 2021 a las 12:17

Si desea editar el valor de margen de los elementos clild después de usar el espacio entre / space de manera uniforme con el elemento principal, se debe dar margen a los elementos secundarios, no al elemento principal.

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  right: 0%;
  width: 100%;
  height: 7%;
  background: green;
}
.leftHeaderItems > p {
  margin : auto 10px; 
}
0
Haraho 27 nov. 2021 a las 12:15