Aprende CSS Flexbox en MENOS de 15 MINUTOS

¿Qué es Flexbox?

Es un sistema de elementos flexibles. Donde los elementos HTML se adaptan y colocan automáticamente siendo mucho más fácil personalizar los diseños.

Está pensado para diseños en una sóla dimensión, es decir, o filas o columnas.

Antes de que existiese el Flexbox había otros modos de hacer layouts:

• Block

• Inline

• Table

• Position

El Flexbox hace que se más fácil crear estructuras de layout responsive, sin usar posicionamiento o flotantes.

En Flexbox tenemos...

• Flex container: es el contenedor que contiene los elementos flexibles

• Flex items: son los elementos flexibles dentro del flex container

Propiedades del elemento padre

Tenemos varias propiedades que podemos poner en nuestro flex container o elemento padre.

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

flex-direction

La propiedad flex-direction define en qué dirección se distribuirán los elementos dentro del container. Tenemos los siguientes valores:

• column

• column-reverse

• row

• row-reverse

flex-wrap

La propiedad flex-wrap específica si los elementos pueden saltar a la siguiente fila/columna si es necesario.

flex-flow

La propiedad flex-flow es una combinación de las propiedades flex-direction y flex-wrap.

justify-content

Sirve para alinear el contenido.

align-items

La propiedad align-items se usa para alinear en vertical los elementos de un flex container.Tenemos varias opciones:

• center

• flex-start

• flex-end

• stretch

• baseline

La propiedad align-content se usa para alinear las filas. Tenemos varias opciones:

• space-between

• space-around

• stretch

• center

• flex-start

• flex-end

El centrado perfecto

Elementos hijos

Automáticamente todos los elementos hijos del flex container se convierten en elementos flexibles.

Estos elementos tienen estas propiedades:

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

order

Especifica el orden de los elementos.

flex-grow

Determina cuánto “crece” un elemento relativo al resto de elementos.

flex-shrink

Determina cuánto se puede “encoger” un elemento respecto al resto de elementos.

flex-basis

Determina la longitud inicial del elemento

flex

Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis

align-self

Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!