Como ajustar el Diseño vs Layout

Como controlar las propiedades de diseño de los addons, con la configuración de la pestaña de  Avanzado> Diseño >.Display/Monitor

En esta configuración se especifica el tipo de cuadro que representa y como puede ser utilizado para un elemento. Hay seis opciones disponibles:

  • flex - contenedor flexible a nivel de bloque. Este es el valor predeterminado para secciones, columnas y divs.
  • inline-flex : contenedor flexible de nivel en línea.
  • bloque - elemento a nivel de bloque. Configure la  visualización  en  bloque cuando utilice la propiedad flotante CSS en sus elementos secundarios.
  • En línea : elemento en línea (como <span>).
  • inline-block - bloque de nivel en línea.
  • none : el elemento no se muestra.

Float/Flotar

La propiedad float no funciona si la propiedad de visualización del elemento principal está configurada en  flex , que es el valor predeterminado para la mayoría de los elementos en Oxygen. Vamos a ver que hay tres opciones disponibles:

  • none : valor predeterminado. El elemento no flota
  • left : el elemento flota a la izquierda de su contenedor.
  • right : el elemento flota a la derecha de su contenedor.

Overflow/Desbordar

Esta configuración especifica qué debe suceder si en el contenido se desborda del cuadro de representación de un elemento. Hay tres opciones disponibles:

  • visible : valor predeterminado. El desbordamiento no está recortado. Se renderiza fuera de la caja del elemento.
  • oculto : el desbordamiento está recortado. El contenido desbordado no es visible.
  • scroll : el desbordamiento está recortado, pero se agrega una barra de desplazamiento para ver el resto del contenido.

Clear/Claro

Esta configuración especifica en qué lados de un elemento los elementos flotantes no pueden flotar. Hay cuatro opciones disponibles:

  • none: valor predeterminado. Permite elementos flotantes en ambos lados.
  • left: no se permiten elementos flotantes en el lado izquierdo.
  • right: no se permiten elementos flotantes en el lado derecho.
  • Ambos: no se permiten elementos flotantes ni en el lado izquierdo ni en el derecho.

Visibility/Visibilidad

Con esta configuración se especifica si un elemento es visible o no. Hay dos opciones disponibles:

  • visible : valor predeterminado. El elemento es visible.
  • hidden : el elemento está oculto (pero aún ocupa espacio).

Z-Index

Esta configuración determina el orden de apilamiento de un elemento. Si dos elementos se superponen, el elemento con el índice Z más alto aparecerá en la parte superior por encima.

Position/Posición

Esta configuración especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo). Hay cuatro opciones disponibles:

  • static : valor predeterminado.
  • absoluto : el elemento se posiciona en relación con su primer elemento ancestro posicionado (no estático).
  • relativo : el elemento se coloca en relación con su posición normal.
  • fijo : el elemento se coloca en relación con la ventana del navegador.

CONTROLES FLEXBOX

Flex Direction/Dirección de posicion

Esta configuración especifica cómo se colocan los elementos flexibles en el contenedor flexible. Hay cuatro opciones disponibles:

  • fila : los elementos flexibles se muestran horizontalmente, como una fila.
  • columna : los elementos flexibles se muestran verticalmente, como una columna.
  • row-reverse : igual que una fila , pero en orden inverso.
  • column-reverse : igual que una columna , pero en orden inverso.

Align Items/Alinear los elementos

Esta configuración especifica la alineación predeterminada para elementos flexibles dentro de un contenedor flexible. Hay cuatro opciones disponibles:

  • flex-start: los elementos se colocan al principio del contenedor.
  • center: los artículos se colocan en el centro del contenedor.
  • flex - end: los artículos se colocan al final del contenedor.
  • estirar: los artículos se estiran para ajustarse al contenedor.

Justify Content/Justificar el contenido

Esta configuración alinea los elementos del contenedor flexible cuando los elementos no utilizan todo el espacio disponible en el eje principal. Hay cinco opciones disponibles:

  • flex-start : los elementos se colocan al principio del contenedor.
  • center : los artículos se colocan en el centro del contenedor.
  • flex-end : los elementos se colocan al final del contenedor.
  • space-between : el espacio disponible se distribuye entre los elementos flexibles.
  • space-around : el espacio disponible se distribuye alrededor de los elementos flexibles.

Flex Wrap/En volver flexible

Esta configuración especifica si los elementos flexibles deben ajustarse o no. Hay tres opciones disponibles:

  • nowrap : especifica que los elementos flexibles no se ajustarán.
  • wrap : especifica que los elementos flexibles se ajustarán si es necesario.
  • wrap-reverse : especifica que los elementos flexibles se ajustarán si es necesario, pero en orden inverso.

Align Content/Alinear contenido

Esta configuración especifica cómo se distribuye el espacio entre y alrededor de los elementos flexibles a lo largo del eje transversal de su contenedor flexible. Hay cinco opciones disponibles:

  • flex-start : las líneas se empaquetan hacia el inicio del contenedor flexible.
  • centro : las líneas se empaquetan hacia el centro del contenedor flexible.
  • flex-end : las líneas se empaquetan hacia el final del contenedor flexible.
  • espacio alrededor : las líneas se distribuyen uniformemente en el contenedor flexible, con espacios de la mitad del tamaño en cada extremo
  • estirar : las líneas se estiran para ocupar el espacio restante.

FLEXBOX CHILD CONTROLS/CONTROLES PEQUEÑOS PARA FLEXBOX

Cuando un elemento es hijo de otro elemento que es display: flex o display: inline-flex, los controles de hijo de Flexbox están disponibles. El ajuste Alinear a sí mismo especifica la alineación del elemento seleccionado dentro del contenedor flexible. Hay cinco opciones disponibles:

  • auto: valor predeterminado. El elemento hereda la propiedad Align Items de su contenedor principal.
  • left: el elemento se coloca a la izquierda (o al inicio) del contenedor.
  • center: el elemento se coloca en el centro del contenedor.
  • right: el elemento se coloca a la derecha (o al final) del contenedor.
  • estirar: el elemento se coloca para adaptarse al contenedor.

La configuración de Orden especifica el orden de un artículo flexible en relación con el resto de los artículos flexibles dentro del mismo contenedor. El valor predeterminado es 0.

La configuración Flex Grow especifica cuánto crece el artículo en relación con el resto de los artículos flexibles dentro del mismo contenedor. El valor predeterminado es 0.

La configuración Flex Shrink especifica cómo se encogerá el artículo en relación con el resto de los artículos flexibles dentro del mismo contenedor. El valor predeterminado es 1.

Si aplicas bien estas configuraciones y características que te ofrece oxygen podrás organizar y diseñar de una manera muy fácil y teniendo un gran control en todos los elementos.

[oxy-reading-progress-bar ct_sign_sha256='35fbc9e6845bf4e2b5dc6dc7eaabe78d8fbc9ff1cf556c3f9c72c1b99a91f97a' ct_options='{"ct_id":4,"ct_parent":2,"selector":"-reading-progress-bar-4-6","original":{"oxy-reading-progress-bar_slug_readingprogressinner_background_color":"color(44)","background-color":"color(1)","height":"13","oxy-reading-progress-bar_viewport_end":"bottom","oxy-reading-progress-bar_position":"top"},"activeselector":false}'][/oxy-reading-progress-bar]
databasefile-emptyrocketthumbs-uplayers