Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/flexlayout»
De WikiEducator
| 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
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/ |
