Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/flexlayout»
De WikiEducator
(→Conceptos en el diseño web) |
|||
| (12 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 17: | Línea 17: | ||
} | } | ||
</source> | </source> | ||
| + | * '''''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. | ||
| + | <source lang=css> | ||
| + | .contenedor-flex{ | ||
| + | flex-wrap: nowrap | wrap | wrap-reverse; | ||
| + | } | ||
| + | </source> | ||
| + | '''''nowrap''''' por defecto | ||
| + | |||
| + | |||
| + | {{MRM_Actividad|title=flex_flow| | ||
| + | '''flex_flow''' nos permite combiar '''''flex-direction''''' y '''''flex_wrap''''' en una sola propiedad | ||
| + | }} | ||
| + | <br /> | ||
;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 principal (filas o columna) | ||
<source lang=css> | <source lang=css> | ||
| Línea 23: | Línea 38: | ||
} | } | ||
</source> | </source> | ||
| − | |||
| − | |||
| − | |||
;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> | ||
.contenedor-flex{ | .contenedor-flex{ | ||
| − | + | align-items: space-around; | |
} | } | ||
</source> | </source> | ||
| Línea 35: | Línea 47: | ||
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 41: | Línea 66: | ||
} | } | ||
| + | </source> | ||
==Creando un item== | ==Creando un item== | ||
Última revisión de 20:13 29 ene 2021
Contenido
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
- 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
|
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; }
|
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)) }
|
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
- 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
- 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
- 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
