Clase 7 | FLEXBOX | HTML5+CSS3 INTERMEDIO

En la Teórica vimos:


FLEXBOX


La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo “caja flexible” produce una mejora sobre el modelo “bloque” porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

Muchos diseñadores verán que el modelo “caja flexible” es más sencillo de utilizar. Los elementos“hijos” de una “caja flexible” pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos “hijos” es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

| LINKS RECOMENDADOS | FLEXBOX


UNIDADES DE MEDIDAS: REM  y  %


Toda página web es responsive de manera natural, nosotros al trabajar los diseños y los estilos CSS vamos bloqueando esta capacidad nativa con tamaños, medidas y posiciones rígidos que hacen que las páginas web dejen de ser adaptables.

Si a un archivo HTML simple, con varios párrafos, algunos encabezados, se abren en un navegador y se comienza a reducir el tamaño de la ventana, se observará que la página web se adapta sin haber escrito una sola línea de CSS o un Media Query.

La rigidez al momento de crear los estilos CSS para nuestras páginas proviene de la aplicación de tamaños fijos a los elementos y también en parte del uso de una unidad de medida rígida: los pixeles.

Al usar pixeles para definir las dimensiones de los objetos y los estilos de fuente no solo estamos definiendo tamaños rígidos, sino que también estamos ignorando las configuraciones que cada usuario pueda tener en su navegador.

Unidades de medida recomendadas

Se puede apreciar el por qué no es una buena idea usar los pixeles como unidad de medida para el diseño web pero entonces ¿Cuál es la alternativa?

Hay 3 unidades de medida en CSS que son las que se deberían usar en el diseño web actual:

  • Porcentajes
  • Rem
  • Em

Porcentajes

La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Em

Las unidades em no han sido creadas por CSS, sino que llevan décadas utilizándose en el campo de la tipografía. Aunque no es una definición exacta, la unidad 1em equivale a la anchura de la letra M (“eme mayúscula”) del tipo y tamaño de letra del elemento.

Es decir, si en elemento tiene aplicado un tamaño de fuente de 16 pixeles, entonces 1 em será igual a 16px (los navegadores de manera predeterminada definen un font-size de 16px al elemento HTML, por lo tanto, por defecto 1em es igual a 16px).

La unidad em es escalable y siempre depende de su elemento padre.

Rem

La unidad de medida rem depende del elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea, es un em basado en la raíz.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.

Esta unidad de medida es recomendable para aplicar a elementos del layout que requieran medidas fijas y eventualmente también para textos que deseemos que tengan un tamaño de fuente que no dependa de su elemento padre.