Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 1
_______________________________________________________________________
Diseño y Maquetación Web
Maquetando una web responsiva
Sesión 7
LOGRO DE LA SESIÓN
Diseña un sitio web responsivo mediante la maquetación con directivas de CSS y Media Query
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
CSS FLEX
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin usar
flotador o posicionamiento. Flexbox tienen 4 elementos
• Bloque, para secciones de una página web
• Inline, para texto
• Tabla, para datos de tablas bidimensionales
• Posicionado, para la posición explícita de un elemento
Elementos Flexbox
Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.
Ejemplo
Un contenedor flexible con tres elementos flexibles:
Diseño y Maquetación Web – Formación Continua
,Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 2
_______________________________________________________________________
A. Contenedor CSS Flex
Elemento principal (contenedor)
Como especificamos en el capítulo anterior, este es un contenedor flexible (el área azul) con tres elementos
flexibles:
El contenedor flexible se vuelve flexible al establecer la propiedad de visualización en flex:
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 3
_______________________________________________________________________
Propiedad de flex-direction
La propiedad flex-direction define en qué dirección el contenedor quiere apilar los elementos flexibles.
El valor column-reverse apila los elementos flexibles verticalmente (pero de abajo hacia arriba):
El valor row apila los elementos flexibles horizontalmente (de izquierda a derecha):
Propiedad flex-wrap
Especifica si los elementos flexibles deben ajustarse o no. Los ejemplos siguientes tienen 12 elementos flexibles
para demostrar mejor la propiedad flex-wrap.
Diseño y Maquetación Web – Formación Continua
Diseño y Maquetación Web – Maquetando una web responsiva 1
_______________________________________________________________________
Diseño y Maquetación Web
Maquetando una web responsiva
Sesión 7
LOGRO DE LA SESIÓN
Diseña un sitio web responsivo mediante la maquetación con directivas de CSS y Media Query
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
CSS FLEX
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin usar
flotador o posicionamiento. Flexbox tienen 4 elementos
• Bloque, para secciones de una página web
• Inline, para texto
• Tabla, para datos de tablas bidimensionales
• Posicionado, para la posición explícita de un elemento
Elementos Flexbox
Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.
Ejemplo
Un contenedor flexible con tres elementos flexibles:
Diseño y Maquetación Web – Formación Continua
,Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 2
_______________________________________________________________________
A. Contenedor CSS Flex
Elemento principal (contenedor)
Como especificamos en el capítulo anterior, este es un contenedor flexible (el área azul) con tres elementos
flexibles:
El contenedor flexible se vuelve flexible al establecer la propiedad de visualización en flex:
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 3
_______________________________________________________________________
Propiedad de flex-direction
La propiedad flex-direction define en qué dirección el contenedor quiere apilar los elementos flexibles.
El valor column-reverse apila los elementos flexibles verticalmente (pero de abajo hacia arriba):
El valor row apila los elementos flexibles horizontalmente (de izquierda a derecha):
Propiedad flex-wrap
Especifica si los elementos flexibles deben ajustarse o no. Los ejemplos siguientes tienen 12 elementos flexibles
para demostrar mejor la propiedad flex-wrap.
Diseño y Maquetación Web – Formación Continua
