VIDEOS

Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión. Conceptos Para empezar a utilizar flexbox lo primero que debemos hacer es conocer algunos de los elementos básicos de este nuevo esquema, que son los siguientes: Flexbox CSS: ¿Cómo funciona? Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre. Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (en fila). Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa. Ítem: Cada uno de los hijos flexibles que tendrá el contenedor en su interior. Una vez tenemos claro esto, imaginemos el siguiente escenario:

CSS Grid Layout es un sistema de rejilla en 2 dimensiones, creado dentro del lenguaje CSS. Es un estándar, lo que quiere decir que no necesitas nada para que el navegador lo entienda. Para ponerlo en práctica necesitas simplemente aplicar el nuevo "display: grid" y comenzar a usar sus potentes propiedades y valores CSS. Con ello podrás controlar todos los aspectos imaginables de la rejilla, obteniendo prácticamente todo lo que se te ocurra de una manera cómoda. Actualmente todos los navegadores soportan CSS Grid Layout, por lo que te recomendamos usarlo. Aplicar el sistema de rejilla es una auténtica maravilla, permitiendo hacer con muy poco esfuerzo cosas que antes necesitabas mucho código CSS, o que directamente eran imposibles de conseguir, al menos con tal versatilidad.CSS Grid Layout es un modelo de maquetación CSS en base a una rejilla, algo que podría no parecer tan novedoso, si tenemos en cuenta que diversas librerías de CSS lo habían intentado ya. Sistemas como 960 Grid System fueron pioneros en crear una base de código CSS para que los diseñadores pudieran posicionar los elementos en una distribución de filas y columnas. El propio Bootstrap incluye entre otras cosas un sistema de rejilla. Al final, estos sistemas funcionaron pero tenían varios problemas. Entre ellos destacamos: Tenías que agregar peso a tu CSS, con código de cientos de clases que muchas veces ni siquiera llegabas a usar. Tenías que aplicar constantemente clases con nombres raros, que ensuciaban tu HTML de manera muy agresiva. Creaba código de muy difícil mantenimiento, haciendo que el proyecto estuviera ligado de manera muy directa con un sistema propietario. Cuando el desarrollador tenía que asumir el código de una web creado con un sistema de rejilla, hacía muy difícil su adaptación. La diferencia ahora es que Grid Layout es un estándar y que no necesitas recargar tu página y tu código CSS para aplicarlo. No necesitas ensuciar tu HTML, ya que todo se aplica desde el CSS, por medio de nuevos atributos, valores y unidades. Además, un sitio con Grid Layout resulta sencillo de mantener y de aplicar otras herramientas de CSS3 como las mediaqueries. Por supuesto, es totalmente adaptable (responsive).