Usuario:ManuelRomero/preferencias/flexlayout

Conceptos en el diseño web

Recursos de la Web

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS

Crear un contenedor con flexbox

.contenedor-flex{
    display:flex;
}

Disponer los elemntos en fila o en comluma

.contenedor-flex{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: blanchedalmond;
}

Ajustar los elementos de un flexbox (del contenedor) en el eje principal (filas o columna)

.contenedor-flex{
    justify-content: space-around;
}
{{MRM_Recursos de la Web|
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
}}
;Ajustar los elementos de un flexbox (del contenedor) en el eje secundario (columna o fila)
<source lang=css>
.contenedor-flex{
    justify-content: space-around;
}
{{MRM_Recursos de la Web|
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
}}
 
 
Adjetivos encontrados en el diseño web
#Felxible
#Líquido
#Porcentual
#Adaptable
...
===Resposive Web Design o RWD===
Para lograr estos fines, el RWD propone y aboga por:
 
#El uso de las reglas Css '''''@media queries''''' para adaptar el layout a la ventana o viewport.
#La caja flexible o '''''flexbox''''' a la espera de que el '''CSS Grid Layout''' sea una opción real.
#Usar recursos gráficos (img, video, canvas...) sensibles al medio o responsive images [1] / responsive images [2]. No sólo en tamaños (px) sino en su resolución (2x...) y/o hasta seleccionar la imagen que se sirve (nuevos elementos como picture, atributos srcset... bases de selección, étc [ver 1])
#Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript).
#Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.
Iceberg web
 
===Flexbox===
*https://carlosazaustre.es/los-5-patrones-del-responsive-design/
*https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*https://escss.blogspot.com.es/2012/11/flexbox-nuevo.html<br />
*El flex-layout está basado en '''''flex-flow direcciones'''''
[[Archivo:flexflow.png]]<br />
*Al hacer un diseño se seguirá del main-start al main-end o del cross-start al cross-end
*Descripción de los elemenetos del diseño
#'''''main-axis-----
#'''''main-start main-end'''''
#'''''main size'''''
#'''''cross-axis'''''
#'''''cross-start cross-end'''''
#'''''cross size'''''
 
 
 
*A continuación las principales propiedades que hay que manejar con su siginificado
'''''display'''''
 
 
 
 
 
https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html
 
 
 
 
http://www.araudi.net/ |