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!

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

¿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