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;