jonmircha

jonmircha

Profesor, Programador Web, Maratonista ðŸƒx15 & Minimalista: Menos pero mejor.


Flexbox

Flexbox CSS es un sistema de maquetación unidimensional, pensado principalmente para el acomodo interno de los elementos, componentes y/o widgets de una interfaz de usuario.

Conceptos Básicos

Conceptos Básicos Flexbox

Propiedades CSS de Flexbox

Flexbox tiene 14 propiedades CSS, 8 que aplican al contenedor padre y 6 a los elementos hijos, a continuación te doy una definición muy puntual sobre cada propiedad, así como los posibles valores que pueden aceptar.

El primer valor que enlisto en cada propiedad es el que toman por defecto.

Propiedades CSS del contenedor padre

display: Define que una caja será flexbox de bloque o flexbox de línea.

display: flex | inline-flex;

flex-direction: Define el eje principal (main axis) row - X, column - Y.

flex-direction: row | row-reverse | column | column-reverse;
flex-direction

flex-wrap: Define si la caja flexbox envuelve o NO a sus hijos.

flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap

flex-flow: Es un shorthand de flex-direction y flex-wrap.

flex-flow: flex-direction flex-wrap;

justify-content: Define la alineación de los hijos en el eje principal (main axis).

justify-content: flex-start | center | flex-end | space-between | space-around |
  space-evenly;
justify-content

align-items: Define la alineación de los hijos en el eje transversal (cross axis), dentro de cada línea.

align-items: stretch | flex-start | flex-end | center | baseline;
align-items

align-content: Define la alineación de los hijos en el eje transversal (cross axis), NO funciona cuando los hijos están en UNA sóla línea (es decir cuando flex-wrap tiene el valor de nowrap, NO FUNCIONA).

align-content: flex-start | flex-end | center | space-between | space-around |
  space-evenly | stretch;

Propiedades CSS de los elementos hijos

flex-grow: Cuando la caja flexbox tenga espacio sobrante, es la habilidad o el factor de crecer, valor por defecto es 0, NO se aceptan valores negativos.

flex-grow: 0;

flex-shrink: Cuando la caja flexbox NO tenga espacio sobrante, es la habilidad o el factor de encogerse, valor por defecto es 1, NO se aceptan valores negativos.

flex-shrink: 1;

flex-basis: Es el tamaño del elemento hijo dentro de la línea de la caja flexbox.

flex-basis: auto | 100px | 2rem | 50% | etc...;

flex: Es un shorthand de las propiedades flex-grow flex-shrink y flex-basis, en ese orden.

flex: 0 1 auto;

order: Representa el orden que tendrán los elementos hijos en la caja flexbox.

order: 0 | 1 | 2 | -3 | etc...;

align-self: Sobreescribe el valor de la propiedad align-items sólo para el elemento hijo especificado.

align-self: stretch | flex-start | flex-end | center | baseline;
align-self

Flexbox en la práctica

Maquetación y Responsive Design

En este video te explico como hacer maquetación y responsive design artesanal con Flexbox, además te explico como funciona internamente la grid de Bootstrap 4 gracias a Flexbox.

Ejercicios Prácticos

En este videos te enseño a realizar los siguientes casos prácticos con Flexbox:

En este videos te enseño a realizar los siguientes casos prácticos con Flexbox:

Flexbox y Bootstrap

En este video te enseño a sacarle el máximo provecho a todas las clases utilitarías que trae Bootstrap 4 de Flexbox, además hago todos los ejercicios que hicimos en los 2 videos anteriores pero usando exclusivamente Bootstrap 4.

Con este video terminamos la miniserie que hice sobre Flexbox en mi canal de YouTube.

Más información sobre Flexbox

Aquí te dejo algunos enlaces interesantes para que puedas aprender más sobre Flexbox:

Si te sirvió mi contenido, compártelo 🤗.

📭 La lista de MirCha

Suscríbete a mi lista, una vez al mes envío el contenido que escribo, grabo o produzco, 🤗 esperando pueda aportar valor personal o profesional.

Puedes darte de baja en cualquier momento, sin hacer preguntas.

¿Te animas?

Si te gusta mi contenido y quieres apoyarme invítame un taco por paypal.

Invítame un Taco