Unidad 14. Técnicas de diseño web (X)



2. Diseño web adaptativo con cajas flexibles. Flexbox.

En este vídeo vemos el diseño adaptativo con cajas flexibles:Videotutorial

 

De igual forma que vimos anteriormente para el diseño líquido con cajas flexibles, en el código HTML creamos un contenedor que agrupa todos los elementos para indicar con la propiedad flex-direction: column que vamos a colocar los elementos de arriba a abajo, así tendremos tres filas; y otro contendor para la fila central que iremos modificando segun queramos tres, dos o una columnas centrales.

<div class="contenedor_adaptable_flex">
  <div class="cabecera_adaptable_flex">Cabecera </div>
  <div class="contenedor_central_adaptable_flex">
    <div class="menu_adaptable_flex">  menu</div>
    <div class="principal_adaptable_flex">principal</div>
    <div class="lateral_adaptable_flex">lateral</div>
  </div>
  <div class="pie_adaptable_flex"> pie</div>
</div>

Igual que en el caso anterior en código de la hoja de estilo podemos ver las tres partes que corresponden a los tres anchos que se definen con las Media Queries.

Para las pantallas grandes (>= 1024) aplicamos la propiedad flex-direction: row al contenedor central para colocar en una fila los tres elementos (menú, principal y lateral). Asi tenemos un diseño en dos columnas.

Para las pantallas medianas (>= 641 y <= 1023) aplicamos la propiedad flex-wrap: wrap; al contenedor central para forzar que los elemento principal y lateral salten de fila, puesto que al elemento menú le hemos cambiado el ancho al 100% para que ocupe toda la fila, asi tenemos un diseño en dos columnas.

Para las pantallas pequeñas (<= 640) no aplicamos ningún estilo al contenedor central para que cada elementos queden en una fila, así tenemos un diseño en una columna.

Igual que en el caso anterior, también modificamos las dimensiones de los elementos según el tamaño de la pantalla.

El código de la hoja de estilo es este:

/* ancho mayor o igual de 1024px */
@media all and (min-width: 1024px) {
  .contenedor_adaptable_flex {
    display: flex;
    flex-direction: column
  }
.cabecera_adaptable_flex { height: 4em; }
.contenedor_central_adaptable_flex { display: flex; flex-direction: row }
.menu_adaptable_flex { height: 10em; width: 15%; }
.principal_adaptable_flex { height: 10em; width: 65%; }
.lateral_adaptable_flex { height: 10em;
width: 20%; }
.pie_adaptable_flex { height: 3em; }
}
/* ancho mayor o igual de 641px y menor o igual de 1023px */ @media all and (min-width:641px) and (max-width: 1023px) { .contenedor_adaptable_flex { display: flex; flex-direction: column }
.cabecera_adaptable_flex { height: 4em; }
.contenedor_central_adaptable_flex { display: flex; flex-direction: row; flex-wrap: wrap; }
.menu_adaptable_flex { height: 3em; width: 100%; }
.principal_adaptable_flex { height: 10em; width: 75%; }
.lateral_adaptable_flex { height: 10em; width: 25%;
}
.pie_adaptable_flex { height: 3em; }
}
/* ancho menor o igual de 640px */ @media all and (max-width: 640px) { .contenedor_adaptable_flex { display: flex; flex-direction: column }
.cabecera_adaptable_flex {
height: 4em;
}
.menu_adaptable_flex {
height: 3em;
}
.principal_adaptable_flex {
height: 10em;
}
.lateral_adaptable_flex {
height: 3em;
}
.pie_adaptable_flex {
height: 3em;
}
}

Y este es el resultado:

 

Cabecera
principal
lateral
pie

Enero-2019 (V 2.0)
Pág. 14.10
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.