Flexbox te permite posicionar elementos de forma dinámica desde un elemento padre. Imagina que tienes el siguiente código:

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

El elemento padre será el div que tiene la clases container.

Por defecto, los elementos hijos (los que tienen la clase item) se posicionarán uno debajo del otro:

display: flex

Para hacer que sus elementos hijos se distribuyan en una fila, debes aplicar las siguientes propiedades CSS al contenedor:

.container {
  display: flex;
}

Esto cambiará el comportamiento de los elementos hijos, colocándolos en una fila en lugar de en una columna, el ancho de cada div dependerá del contenido:

justify-content

También podemos modificar su posición desde aquí con la propiedad justify-content. Por ejemplo, si queremos que los elementos se distribuyan uniformemente en el espacio disponible, podemos usar:

.container {
  display: flex;
  justify-content: space-between; 
}

Esto agregará un espacio entre los elementos hijos, distribuyéndolos uniformemente en la fila:

La propiedad justify-content puede tener los siguientes valores:

• flex-start: Alinea los elementos al inicio del contenedor.
• flex-end: Alinea los elementos al final del contenedor.
• center: Alinea los elementos en el centro del contenedor.
• space-between: Distribuye los elementos con espacio entre ellos.
• space-around: Distribuye los elementos con espacio alrededor de ellos.

Te invito a que experimentes con cada uno de ellos.

align-items

La propiedad align-items se utiliza para alinear los elementos hijos a lo largo del eje transversal (verticalmente en un contenedor de fila).

Puedes hacer que todos los items empiecen desde la parte superior del contenedor, alineándolos al inicio:

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
}

Puede tener los siguientes valores:

• flex-start: Alinea los elementos al inicio del contenedor.
• flex-end: Alinea los elementos al final del contenedor.
• center: Alinea los elementos en el centro del contenedor.
• baseline: Alinea los elementos en la línea base del contenedor.
• stretch: Estira los elementos para que ocupen todo el espacio disponible.

Más propiedades

Flexbox nos permite modificar la posición de los elementos de muchas formas más, las mismas que te explico a detalle en el siguiente video: