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

Última revisión de 21:13 29 ene 2021

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

Creando un contenedor

.contenedor-flex{
    display:flex |inline-flex;
}

Disponer los elemntos en fila o en columna

.contenedor-flex{
    flex-direction: row | column | row-reverse | column-reverse;
}

• row por defecto

Qué hacer con los items que no quepan en una fila o columna

• obligar a que se queden en el mismo eje principal (fila o columna) o usar la siguiente fila o columna.

.contenedor-flex{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap por defecto

Actividad

flex_flow nos permite combiar flex-direction y flex_wrap en una sola propiedad

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

.contenedor-flex{
    justify-content: space-around;
}

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

.contenedor-flex{
    align-items: space-around;
}

Recursos de la Web

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Centrar (horizontalmente y verticalmente) los elementos de un contenedor con display flex

    display: flex;
    flex-direction: row; //Elementos puestos por fila
    justify-content: center; //eje princiapl  //centrado horizontalmente ( ya que el eje principal es horizontal (row))
    align-items: center; //eje secundario //centrado verticalmente ( ya que el eje secundario es horizontal (row))
}

Recursos de la Web

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Número de líneas que tiene el contenedor

.contenedor-flex{
    flex-wrap: wrap|nowrap
}

Creando un item

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:

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.

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
  
• El flex-layout está basado en flex-flow direcciones

Archivo:Flexflow.png

• 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

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