Usuario:ManuelRomero/preferencias/flexlayout

Crear un contenedor con flexbox

 * Creando un contenedor
 * Disponer los elemntos en fila o en columna
 * Ajustar los elementos de un flexbox (del contenedor) en el eje principal (filas o columna)


 * Ajustar los elementos de un flexbox (del contenedor) en el eje secundario (columna o fila)

.contenedor-flex{ flex-wrap: wrap|nowrap }
 * Número de líneas que tiene el contenedor

Haciendo un item que sea contenedor
Adjetivos encontrados en el diseño web ...
 * 1) Felxible
 * 2) Líquido
 * 3) Porcentual
 * 4) Adaptable

Resposive Web Design o RWD
Para lograr estos fines, el RWD propone y aboga por:

Iceberg web
 * 1) El uso de las reglas Css @media queries para adaptar el layout a la ventana o viewport.
 * 2) La caja flexible o flexbox a la espera de que el CSS Grid Layout sea una opción real.
 * 3) 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])
 * 4) Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript).
 * 5) Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.

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


 * El flex-layout está basado en flex-flow direcciones


 * 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
 * 1) 'main-axis-
 * 2) main-start main-end
 * 3) main size
 * 4) cross-axis
 * 5) cross-start cross-end
 * 6) cross size

display
 * A continuación las principales propiedades que hay que manejar con su siginificado

https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html

http://www.araudi.net/ |