Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/flexlayout»

De WikiEducator
Saltar a: navegación, buscar
Línea 1: Línea 1:
 
===Conceptos en el diseño web ===
 
===Conceptos en el diseño web ===
 
+
<br />
 +
{{MRM_Recursos de la Web|
 
  https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
 
  https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
 +
}}
 +
;Crear un contenedor con flexbox
 +
<source lang=css>
 +
.contenedor-flex{
 +
    display:flex;
 +
}
 +
</source>
 +
;Disponer los elemntos en fila o en comluma
 +
<source lang=css>
 +
.contenedor-flex{
 +
    flex-direction: row;
 +
    justify-content: space-around;
 +
    align-items: center;
 +
    background-color: blanchedalmond;
 +
}
 +
</source>
 +
;Ajustar los elementos de un flexbox (del contenedor) en el eje principal (filas o columna)
 +
<source lang=css>
 +
.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
 
Adjetivos encontrados en el diseño web

Revisión de 23:47 14 mar 2018

Conceptos en el diseño web




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/ |