Alinear elementos en el contenedor con flexbox

Continuando con la serie de artículos sobre como maquetar en css con flexbox, hoy tendremos como objetivo el aprender a alinear elementos dentro de un contenedor. Una de las funciones o posibiliades que más me llamó la antención al comenzar a trabajar con flexbox fue la facilidad para poder acomodar o alinear elementos, tanto horizontalmente, verticalmente como cada elemento por separado.

Para alinear los elementos nuestro contenedor acepta 4 propiedades fundamentales

justify-content
align-items
align-self

Puedes ver el video demostrativo en este enlace.

Estas propiedades colocarán los elementos dependiendo de como se hubiese definido nuestro main-axis, aquí puedes darle una revisada a este tema.
AxisFlexbox

justify-content:

Esta propiedad será la encargada de organizar los elementos dentro de nuestro contenedor a través del main-axis (de forma horizontal en el caso de la imagen).

Valores aceptados:

justify-content: flex-start;

See the Pen ju-co:flsart by Robert (@h3dx0) on CodePen.

Al aplicar esta propiedad puede que no se vea ningún efecto de inicio dado que nuestro menú en el ejemplo ya tiene asignada la propiedad flex-direction: row desde un inicio acomodando los elementos uno al lado del otro, lo que se quiere lograr es que los elementos se acomoden donde comienza el contenedor que en este caso es de izquierda a derecha.

justify-content: center;

See the Pen justcont:center by Robert (@h3dx0) on CodePen.

Aplicando esta propiedad vemos como todos los elementos se centran teniendo en cuenta el main-axis que en este caso es en forma horizontal.

justify-content: flex-end;

See the Pen justcont:flexend by Robert (@h3dx0) on CodePen.

Flex-end nos ayuda a alinear nuestros elementos al final de nuestro contenedor en este caso hacia la derecha. Lo que anteriormente lograríamos usando floats.

justify-content: space-between;

See the Pen jcspace-btween by Robert (@h3dx0) on CodePen.

Space-between es una de las propiedades que más me gustan, dada la facilidad con que se pueden dar espacios exactos (ayudándonos con el diseño responsivo en muchos casos) entre los elementos que estamos colocando. Esta propiedad coloca los elementos hacia los extremos de nuestro contenedor y el espacio restante los distribuye con los demás elementos.

justify-content: space-around;

See the Pen jc:space-around by Robert (@h3dx0) on CodePen.

Space-around así como space-between nos ayuda a distribuir de forma equitativa el espacio entre nuestros elementos, a diferencia de de la propiedad anterior , crea espacios iguales entre todos los elementos así como con los límites de nuestro contenedor.

Alinear elementos según cross-axis

align-items:

Esta propiedad será la encargada de organizar los elementos dentro de nuestro contenedor a través del cross-axis (de forma vertical en el caso de la imagen).

Valores aceptados:

align-items: flex-start:

align-items: flex-end;

alinear elementos

align-items: center;

alinear elementos

align-items: strech;

alinear elementos

Estas son las principales propiedades para poder controlar la ubicación de todos los elementos dentro de nuestro contenedor. Muchas de estas propiedades están sujetas a como orientemos nuestros main-axis y cross-axis. Estas son algunos de los resultados que ahora con flexbox se puede lograr de forma mas sencilla.

Muchas gracias por su lectura. Espero que les sirva este artículo para que puedan comenzar a usar estas fantásticas propiedades y atributos.

No lo dudes y regálame un simple GRACIAS.

RNC

¿Estás buscando un programador Freelance?

Alinear elementos en el contenedor con flexbox