¿qué es flexbox y como se utiliza?
TRANSCRIPT
¿Qué es y Cómo se Utiliza?Por Tony López
¿Qué es Flexbox?
Un modo de estructura en CSS3 que provee una forma sencilla y limpia de organizar los elementos en un contenedor.
● NO USA FLOATS● Es adaptable y “mobile-friendly”● Posicionar los elementos-hijos es más sencillo● Los márgenes del contenedor de Flex no colapsan con los márgenes de su
contenido● El orden de los elementos puede ser cambiado de manera sencilla sin
cambiar el código de HTML.
Flexbox Concepto del Modelo de Caja
● La habilidad de alterar el alto y ancho de los elementos para encajar mejor en el espacio disponible del contenedor
● Flexbox es agnóstico en dirección. Trabaja bien horizontal y verticalmente.● Construido para estructuras de escalas-pequeñas. Mientras que “Grid” que
está surgiendo ahora, es para estructuras de escalas-grandes.
Diagrama de Flexbox
Propiedades de Flexbox
display: flex | inline-flex flex-grow: <number>
flex-direction: row | column flex-shrink: <number>
flex-wrap: wrap | nowrap | wrapreverse flex: <integer>
flex-basis: <lenght> order: <integer>
justify-content: flex-start | flex-end | center
align-self: flex-start | flex-end | center
align-items: flex-start | flex-end | center
align-content: flex-start | flex-end | center
Flexbox en Acción
Flexbox en Acción
Flexbox en Acción
Flexbox en Acción
Flexbox en Acción
Flexbox en Acción
Más Recursos
● https://css-tricks.com/snippets/css/a-guide-to-flexbox/● http://learnlayout.com/flexbox.html● https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties● https://www.w3schools.com/css/css3_flexbox.asp● http://flexboxgrid.com/
Mi Página Web
● lopezpagan.com● youtube.com/lopezpagan ● twitter.com/lopezpagan● facebook.com/lopezpagan● github.com/lopezpagan● plus.google.com/+TonyLopezPagan