¿Qué es Flexbox y Como se Utiliza?
-
Upload
tony-lopez-pagan -
Category
Internet
-
view
237 -
download
1
Transcript of ¿Qué es Flexbox y Como se Utiliza?
![Page 1: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/1.jpg)
¿Qué es y Cómo se Utiliza?Por Tony López
![Page 2: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/2.jpg)
¿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.
![Page 3: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/3.jpg)
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.
![Page 4: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/4.jpg)
Diagrama de Flexbox
![Page 5: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/5.jpg)
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
![Page 6: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/6.jpg)
Flexbox en Acción
![Page 7: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/7.jpg)
Flexbox en Acción
![Page 8: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/8.jpg)
Flexbox en Acción
![Page 9: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/9.jpg)
Flexbox en Acción
![Page 10: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/10.jpg)
Flexbox en Acción
![Page 11: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/11.jpg)
Flexbox en Acción
![Page 12: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/12.jpg)
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/
![Page 13: ¿Qué es Flexbox y Como se Utiliza?](https://reader035.fdocuments.net/reader035/viewer/2022062401/5a658c817f8b9aa84f8b4da1/html5/thumbnails/13.jpg)
Mi Página Web
● lopezpagan.com● youtube.com/lopezpagan ● twitter.com/lopezpagan● facebook.com/lopezpagan● github.com/lopezpagan● plus.google.com/+TonyLopezPagan