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

De WikiEducator
Saltar a: navegación, buscar
(Crear un contenedor con flexbox)
 
Línea 23: Línea 23:
 
}
 
}
 
</source>
 
</source>
{{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)
 
;Ajustar los elementos de un flexbox (del contenedor) en el eje secundario (columna o fila)
 
<source lang=css>
 
<source lang=css>
Línea 35: Línea 32:
 
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 
}}
 
}}
 +
;Centrar (horizontalmente y verticalmente) los elementos de un contenedor con display flex
 +
<source lang=css>
 +
    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))
 +
}
 +
</source>
 +
 +
{{MRM_Recursos de la Web|
 +
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 +
}}
 +
 
;Número de líneas que tiene el contenedor
 
;Número de líneas que tiene el contenedor
 
<source lang=css>
 
<source lang=css>
Línea 42: Línea 52:
  
 
</source>
 
</source>
 +
 
==Creando un item==
 
==Creando un item==
  

Última revisión de 21:16 3 jul 2020

Conceptos en el diseño web




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;
}
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;
}



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))
}




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

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