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

De WikiEducator
Saltar a: navegación, buscar
(→‎Felxbox)
(→‎Crear un contenedor con flexbox)
(7 revisiones intermedias por el mismo usuario no mostrado)
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
 +
}}
 +
==Crear un contenedor con flexbox==
 +
;Creando un contenedor
 +
<source lang=css>
 +
.contenedor-flex{
 +
    display:flex |inline-flex;
 +
}
 +
</source>
 +
;Disponer los elemntos en fila o en columna
 +
<source lang=css>
 +
.contenedor-flex{
 +
    flex-direction: row | column | row-reverse | column-reverse;
 +
}
 +
</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;
 +
}
 +
</source>
 +
;Ajustar los elementos de un flexbox (del contenedor) en el eje secundario (columna o fila)
 +
<source lang=css>
 +
.contenedor-flex{
 +
    align-items: space-around;
 +
}
 +
</source>
 +
{{MRM_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
 +
<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
 +
<source lang=css>
 +
.contenedor-flex{
 +
    flex-wrap: wrap|nowrap
 +
}
 +
 +
</source>
 +
 +
==Creando un item==
 +
 +
==Haciendo un item que sea contenedor==
 +
 
Adjetivos encontrados en el diseño web
 
Adjetivos encontrados en el diseño web
 
#Felxible
 
#Felxible
Línea 6: Línea 63:
 
#Adaptable
 
#Adaptable
 
...
 
...
 +
 
===Resposive Web Design o RWD===
 
===Resposive Web Design o RWD===
 
Para lograr estos fines, el RWD propone y aboga por:
 
Para lograr estos fines, el RWD propone y aboga por:
Línea 17: Línea 75:
  
 
===Flexbox===
 
===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 />
 
*https://escss.blogspot.com.es/2012/11/flexbox-nuevo.html<br />
−
#Felxibilidad Adaptación de los '''''felx items''''' '''(hijos)''' a los '''''flex container''''' (Tamaño, contenido, espacio ...)
+
*El flex-layout está basado en '''''flex-flow direcciones'''''
−
#'''''Flex container ''''' : Caja '''contenedora''' de los '''''flex items''''' (hijos)
+
[[Archivo:flexflow.png]]<br />
−
#Flex items
+
*Al hacer un diseño se seguirá del main-start al main-end o del cross-start al cross-end
−
#Axis o ejes
+
*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'''''
  
  

Revisión de 21:16 3 jul 2020

Conceptos en el diseño web



Icon inter.gif
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;
}
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;
}


Icon inter.gif
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))
}



Icon inter.gif
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

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

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/preferencias/flexlayout&oldid=26728»