¿Qué es el FLEX CONTAINER?

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

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.

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.