Sesión 16: Display; Flex

Cuando se comienza a traspasar el diseño o se extrae de su maquetado se debe identificar todos los bloques del sitio escribiendo el html desde arriba y bajando: de body, cabecera, nav, div, articule, section, footer etc.

Qué es Flex

Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquetar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

El diseño flex-box de CSS es una forma particular de especificar el diseño de las páginas HTML. El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

 

Uno de los rasgos más definitorios de la disposición de flex es su capacidad para adaptarse al entorno, basada en su entorno de visualización. Las cajas flex pueden ajustarse en tamaño, ya sea disminuyendo, para evitar acaparar innecesariamente el espacio, o aumentando para dejar espacio para que el contenido se limite dentro de sus límites. Además, la disposición de las cajas flexibles es menos restrictiva en cuanto al flujo de contenidos que las de los tipos de visualización en bloque y en línea, que suelen ser unidireccionales. De hecho, no sólo puede especificarse el flujo flex direccional, a nivel de estilo, como hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo; los elementos individuales dentro de un contenedor flex también pueden reordenarse y reorganizarse automáticamente para adaptarse al espacio de disposición disponible.

Propiedad CSS flex

https://www.w3schools.com/css/css3_flexbox.asp

el término quiere decir flexible, todo lo de dentro será flexible para todas las direcciones, flex alinea todo hacia el lado completando la pagina.

Flex e guia por los elemento padres, son los contenedores de otros elementos, por ejemplo header puede contener a <UL> <img> <p> etc…. Estos elementos se llaman hijos

Cuando en CSS se le coloca la característica display; flex Ahí es cuando puedo utilizar sus características, desde ahi los contenedores del elemento padre cambiaran a menos que les coloque ID a objetos que sean específicos.

Al body no se deberían colocar flex, es mejor ir por parte, cada elemento padre se recomienda que tenga su propio flex – ID o class en el caso de querer modificar elementos específicos.

La clase continua con el ejercicio de explorar y usar los atributos de display flex, y posteriormente aplicarlos a nuestra layout previamente seccionada

Para esta ocasión nos quedamos con etiqueta header y buscamos modificarla.