Aprende CSS Flexbox en MENOS de 15 MINUTOS

Vamos aprender Flexbox CSS en tiempo record en menos de 15 minutos, sí, ¡has leído bien!

¿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

See the Pen CSS | Flexbox by Francisco Palomares Barrios (@kikopalomares) on CodePen.

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

See the Pen CSS | Flexbox - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-wrap

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

See the Pen CSS | Flexbox - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-flow

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

See the Pen CSS | Flexbox - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

justify-content

Sirve para alinear el contenido.

See the Pen CSS | Flexbox - 10 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 11 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 12 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 13 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 14 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

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

See the Pen CSS | Flexbox - 15 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 16 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 17 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 18 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 19 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

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

  • space-between
  • space-around
  • stretch
  • center
  • flex-start
  • flex-end

See the Pen CSS | Flexbox - 20 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 21 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 22 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 23 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 24 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

See the Pen CSS | Flexbox - 25 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El centrado perfecto

See the Pen CSS | Flexbox - 26 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

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.

See the Pen CSS | Flexbox - 27 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-grow

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

See the Pen CSS | Flexbox - 28 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-shrink

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

See the Pen CSS | Flexbox - 29 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-basis

Determina la longitud inicial del elemento

See the Pen CSS | Flexbox - 30 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex

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

See the Pen CSS | Flexbox - 31 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

align-self

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

See the Pen CSS | Flexbox - 32 by Francisco Palomares Barrios (@kikopalomares) on CodePen.


Cursos gratuitos relacionados:

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats