Layouts

Controla las propiedades de diseño de los elementos con los ajustes dentro de Advanced > Layout.

Display

Este ajuste especifica el tipo de cuadro de representación utilizado para un elemento. Hay seis opciones disponibles:

• flex – contenedor flexible a nivel de bloque. Esta es la opción por defecto para secciones, columnas y divs.
• inline-flex –contenedor flex de nivel inline..
• block – elemento a nivel de bloque. Establece la visualización en bloque cuando se utiliza la propiedad CSS float en sus hijos.
• Inline – elemento inline (como <span>).
• inline-block – bloque de nivel inline.
• none – el elemento no se muestra.

Float

La propiedad float no funciona si la propiedad display del elemento padre está establecida en flex, que es el valor por defecto para la mayoría de los elementos en Oxygen. Hay tres opciones disponibles:

• none – Valor por defecto. 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

Este ajuste especifica lo que debe suceder si el contenido desborda la caja de representación de un elemento. Hay tres opciones disponibles:

• visible – Valor por defecto. El desbordamiento no se recorta. Se renderiza fuera de la caja del elemento.
• hidden – El desbordamiento se recorta. El contenido desbordado no es visible.
• scroll – El desbordamiento se recorta, pero se añade una barra de desplazamiento para ver el resto del contenido

Clear

Este ajuste especifica en qué lados de un elemento flotante no se permite flotar. Hay cuatro opciones disponibles:

• none – Valor por defecto. 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.
• both –No se permiten elementos flotantes ni en el lado izquierdo ni en el derecho.

Visibility

Este ajuste especifica si un elemento es visible o no. Hay dos opciones disponibles:

• visible – Valor por defecto. El elemento es visible.
• hidden – El elemento está oculto (pero sigue ocupando espacio).

Z-Index

Este ajuste 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.

Position

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

• static – Valor por defecto.
• absolute – El elemento se posiciona en relación a su primer elemento antecesor posicionado (no estático).
• relative – El elemento se posiciona en relación a su posición normal.
• fixed – El elemento se posiciona en relación a la ventana del navegador.

CONTROLES FLEXBOX

Flex Direction

Este ajuste especifica cómo se colocan los elementos flex en el contenedor flex. Hay cuatro opciones disponibles:

• row – Los elementos flexibles se muestran horizontalmente, como una fila.
• column – Los elementos flexibles se muestran verticalmente, como una columna.
• row-reverse –Igual que un row, pero en orden inverso.
• column-reverse – Igual que una column, pero en orden inverso.

Align Items

Este ajuste especifica la alineación por defecto para los elementos flexibles dentro de un contenedor flexible. Hay cuatro opciones disponibles:

• flex-start – Los elementos se posicionan al principio del contenedor.
• center –Los elementos se colocan en el centro del contenedor.
• flex-end – Los elementos se colocan al final del contenedor.
• stretch –Los elementos se estiran para ajustarse al contenedor.

Justify Content

Este ajuste 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 posicionan al principio del contenedor.
• center – Los elementos 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 flex.
• space-around – El espacio disponible se distribuye alrededor de los elementos flex.

Flex Wrap

Este ajuste especifica si los elementos flexibles deben envolverse o no. Hay tres opciones disponibles:

• nowrap – Especifica que los elementos flexibles no se envolverán.
• wrap – Especifica que los elementos flexibles se envolverán si es necesario.
• wrap-reverse – Especifica que los elementos flexibles se envolverán si es necesario, pero en orden inverso.

Align Content

Este ajuste 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.
• center – Las líneas se empaquetan hacia el centro del contenedor flexible.
• flex-end – Las líneas se empaquetan hacia el final del contenedor flexible.
• space-around – Las líneas se distribuyen uniformemente en el contenedor flexible, con espacios de medio tamaño en cada extremo
• stretch – Las líneas se estiran para ocupar el espacio restante.

FLEXBOX CHILD CONTROLS

Cuando un elemento es hijo de otro elemento que es display: flex o display: inline-flex, los controles Flexbox Childestán disponibles.

El ajuste Align Self por sí mismo especifica la alineación para el elemento seleccionado dentro del contenedor flexible. Hay cinco opciones disponibles:

• auto –Valor por defecto. El elemento hereda la propiedad Align Items de su contenedor padre.
• left –El elemento se posiciona a la izquierda (o al principio) del contenedor.
• center – El elemento se posiciona en el centro del contenedor.
• right –El elemento se posiciona a la derecha (o al final) del contenedor.
• stretch –El elemento se posiciona para ajustarse al contenedor.

La configuración Order especifica el orden de un elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor. El valor por defecto es 0 (cero).

El ajuste Flex Grow especifica cuánto crece el elemento en relación con el resto de los elementos de flexión dentro del mismo contenedor. El valor por defecto es 0 (cero).

El ajuste Flex Shrink especifica cuánto se encogerá el elemento en relación con el resto de los elementos flexibles dentro del mismo contenedor. El valor por defecto es 1.