¿Qué es el FLEX CONTAINER?

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

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