1

Estoy intentando alinear unos ítems verticalmente pero le doy el align-items: center; pero por alguna razón no lo centra, no entiendo cual es el problema.

.flex-container {
  display: flex;
  align-items: center;
  gap: 8px
}

.flex-item {
  background-color: #042388;
  width: 150px;
  height: 150px;
}
<body>
    <div class="flex-container">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
  </body>

1 respuesta 1

3

Prueba utilizando justify-content.

La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px
}

.flex-item {
    background-color: #042388;
    width: 150px;
    height: 150px;
}
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>

Para más información puedes revisar Alineando contenido en el eje principal.

Citando un poco el contenido de este enlace:

Con justify-content controlamos que sucede con el espacio disponible, en caso de que haya más espacio del que se necesita para mostrar los ítems.

La propiedad justify-content accepta el mismo valor que align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (not defined in the Flexbox specification)

Para el caso de la propiedad align-items, puedes revisar el siguiente link: El eje transversal

Un poco del contenido citado:

Las propiedades align-items y align-self controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si flex-direction se encuentra en row ó en columnas si flex-direction se encuentra en column.

Para la alineación vertical puedes utilizar flex-direction en este caso utilizando la opción column.

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

Las opciones que podemos utilizar son:

  • flex-direction: row;
  • flex-direction: row-reverse;
  • flex-direction: column;
  • flex-direction: column-reverse;
4
  • Gracias por tu respuesta, pero necesito alinear los elementos verticalmente y ahí es donde no me funciona. Commented el 26 may. 2022 a las 12:52
  • Ok, veo que corregiste tu pregunta, enseguida completo mi respuesta. ;)
    – Israel-ICM
    Commented el 26 may. 2022 a las 13:02
  • @DanielMedina, corregí mi respuesta. ;)
    – Israel-ICM
    Commented el 26 may. 2022 a las 13:06
  • Muchas gracias @israel-ICM :) Commented el 27 may. 2022 a las 19:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.