• Cuarzo.dev
  • Posts
  • Aprende CSS Flexbox en MENOS de 15 MINUTOS

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

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!

Join the conversation

or to participate.