Dirección de los controles

• no definido: de forma predeterminada, corresponde a "en fila".
• en fila (row): los controles se disponen horizontalmente, de izquierda a derecha.
• en columna (column): los controles se disponen verticalmente, de arriba hacia abajo.
• en fila, en orden inverso (row-reverse): los controles se disponen horizontalmente, de derecha a izquierda.
• en columna, en orden inverso (column-reverse): los controles se disponen verticalmente, de abajo hacia arriba.

• Salto de línea (flex-wrap)
• Alineación horizontal (justify-content)
• Alineación vertical global (align-content)
• Alineación vertical en cada fila (align-items)

• Salto de línea (flex-wrap)
• Alineación vertical (justify-content)
• Alineación horizontal global (align-content)
• Alineación horizontal en cada columna (align-items)

Dirección en fila

A continuación se muestran los valores para una dirección en fila:

• Salto de línea (flex-wrap):
  Define la posición de los controles en el contenedor flexbox. Los controles se disponen horizontalmente, de izquierda a derecha. Si no hay suficiente espacio horizontal, los demás controles saltan a la siguiente línea. Este modo tiene en cuenta el ancho de cada control y el ancho del contenedor flexbox.
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "sin salto de línea".
  • sin salto de línea (nowrap): Los controles se disponen en una sola línea. El control Flexbox se expande horizontalmente o se muestra una barra de desplazamiento.
  • con salto de línea (wrap): Los controles que no caben en la línea se colocan en la línea siguiente.
  • con salto de línea, en orden inverso (wrap-reverse): Los controles que no caben en la línea se colocan en la línea siguiente, de abajo hacia arriba.
• Alineación horizontal (justify-content):
  Define la disposición horizontal de los controles. Los controles se disponen de izquierda a derecha según el orden definido en los ajustes de la pestaña "General".
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "al inicio".
  • al inicio (flex-start): El primer control se alinea a la izquierda. Los demás controles se disponen de izquierda a derecha.
  • centrar (center): Los controles se centran horizontalmente. No hay espacio entre ellos. El mismo valor de espaciado se aplica a la izquierda y a la derecha del grupo de controles.
  • al final (flex-end): El último control se alinea a la derecha. Los demás controles se disponen de derecha a izquierda.
  • espacio entre los elementos (space-between): Los controles se disponen horizontalmente, de izquierda a derecha. El primer control se alinea a la izquierda. El último control se alinea a la derecha. los demás controles se distribuyen en el espacio restante y se utiliza el mismo valor de espaciado entre los controles.
  • espacio alrededor de los elementos (space-around): Los controles se disponen horizontalmente, de izquierda a derecha. Los controles se distribuyen con el mismo espacio a su alrededor, teniendo en cuenta tanto los demás controles como los bordes derecho e izquierdo del contenedor flexbox.
• Alineación vertical global (align-content)::
  Define la disposición vertical de los controles. Los controles se disponen de izquierda a derecha y de arriba hacia abajo según el orden definido en los ajustes de la pestaña "General".
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "expandir".
  • al inicio (flex-start): Los controles de la primera línea se alinean con el borde superior del contenedor flexbox. Los controles de la segunda línea se alinean con el borde inferior de los controles de la primera línea, etc.
  • centrar (center): Los controles de todas las líneas se centran verticalmente, teniendo en cuenta la altura total de las líneas.
  • al final (flex-end): Los controles de la última línea (N) se alinean con el borde inferior del contenedor flexbox. Los controles de la penúltima línea (N-1) se alinean con el borde superior de los controles de la última línea (N), etc.
  • espacio entre los elementos (space-between): Los controles de la primera línea se alinean con el borde superior del contenedor flexbox. Los controles de la última línea (N) se alinean con el borde inferior del contenedor flexbox. Los controles de las líneas interiores se alinean y distribuyen a igual distancia de los controles de la primera y última línea.
  • espacio alrededor de los elementos (space-around): Los controles de cada línea se distribuyen verticalmente de arriba hacia abajo. Los controles de cada línea se distribuyen con el mismo espacio a su alrededor, teniendo en cuenta tanto los demás controles como los bordes superior e inferior del contenedor flexbox.
  • expandir (stretch): Los controles se expanden horizontal y verticalmente para ocupar el espacio restante en el contenedor flexbox. Este es el valor predeterminado ("no definido").
• Alineación vertical en cada fila (align-items):
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "expandir".
  • al inicio (flex-start): Todos los controles se alinean con el borde superior del control Flexbox.
  • centrar (center): Todos los controles se centran. Cada control se centra según su altura respectiva.
  • al final (flex-end): Todos los controles se alinean con el borde inferior del control Flexbox.
  • alinear textos * (baseline): Todo el texto de los controles se alinea.
    Observación: '*' indica que esta opción no se tiene en cuenta en el editor.
  • expandir (stretch): El control se expande verticalmente.

Dirección en columna

• Salto de línea (flex-wrap)
  Define la posición de los controles en el contenedor flexbox. Los controles se disponen verticalmente de arriba hacia abajo. Si no hay más espacio vertical, los demás controles pasan a la línea de la derecha. Este modo tiene en cuenta el ancho de cada control y el ancho del contenedor flexbox.
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "sin salto de línea".
  • sin salto de línea (nowrap): Los controles se disponen verticalmente en una sola columna, de arriba hacia abajo. El control Flexbox se expande verticalmente o se muestra una barra de desplazamiento.
  • con salto de línea (wrap): Los controles se disponen verticalmente de arriba hacia abajo. Si no hay suficiente espacio vertical para el siguiente control, éste se ubica en la siguiente columna a la derecha.
  • con salto de línea, en orden inverso (wrap-reverse): Los controles se disponen verticalmente de arriba hacia abajo, empezando por la esquina superior izquierda del contenedor flexbox. Si no hay suficiente espacio vertical para el siguiente control, éste se ubica en la siguiente columna a la izquierda.
• Alineación vertical (justify-content)
  Define la disposición vertical de los controles. Los controles se disponen de arriba hacia abajo según el orden definido en los ajustes de la pestaña "General".
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "al inicio".
  • al inicio (flex-start): El primer control se alinea en la parte superior. Los demás controles se disponen de arriba hacia abajo.
  • centrar (center): Los controles se centran verticalmente. No hay espacio entre ellos. El mismo valor de espaciado se aplica arriba y abajo del grupo de controles.
  • al final (flex-end): El último control se alinea en la parte inferior. Los demás controles se disponen de abajo hacia arriba.
  • espacio entre los elementos (space-between): Los controles se distribuyen verticalmente de arriba hacia abajo. El primer control se alinea en la parte superior. El último control se alinea en la parte inferior. Los demás controles se distribuyen en el espacio restante y se utiliza el mismo valor de espaciado entre los controles.
  • espacio alrededor de los elementos (space-around): Los controles se distribuyen verticalmente de arriba hacia abajo. Los controles se distribuyen con el mismo espacio a su alrededor, teniendo en cuenta tanto los demás controles como los bordes superior e inferior del contenedor flexbox.
• Alineación horizontal global (align-content)
  Define la disposición horizontal de los controles. Los controles se disponen de izquierda a derecha y de arriba hacia abajo según el orden definido en los ajustes de la pestaña "General".
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "expandir".
  • al inicio (flex-start): Los controles de la primera columna se alinean con el borde izquierdo del contenedor flexbox. Los controles de la segunda columna se alinean con el borde derecho de los controles de la primera columna, etc.
  • centrar (center): Los controles de todas las columnas se centran horizontalmente, teniendo en cuenta el ancho total de las columnas.
  • al final (flex-end): Los controles de la última columna (N) se alinean con el borde derecho del contenedor flexbox. Los controles de la penúltima columna (N-1) se alinean con el borde izquierdo de los controles de la última columna (N), etc.
  • espacio entre los elementos (space-between): Los controles de la primera columna se alinean con el borde izquierdo del contenedor flexbox. Los controles de la última columna (N) se alinean con el borde derecho del contenedor flexbox. Los controles de las columnas interiores se alinean y distribuyen a igual distancia de los controles de la primera y última columna.
  • espacio alrededor de los elementos (space-around): Los controles de cada columna se distribuyen horizontalmente de izquierda a derecha. Los controles de cada columna se distribuyen con el mismo espacio a su alrededor, teniendo en cuenta tanto los demás controles como los bordes izquierdo y derecho del contenedor flexbox.
  • expandir (stretch): Los controles se expanden horizontal y verticalmente para ocupar el espacio restante en el contenedor flexbox.
• Alineación horizontal en cada columna (align-items):
  
  Las opciones disponibles son:
  • no definido: Valor predeterminado. Corresponde a "expandir".
  • al inicio (flex-start): Todos los controles se alinean con el borde izquierdo del control Flexbox.
  • centrar (center): Todos los controles se centran. Cada control se centra según su ancho respectivo.
  • al final (flex-end): Todos los controles se alinean con el borde derecho del control Flexbox.
  • alinear textos * (baseline): Todo el texto de los controles se alinea.
    Observación: '*' indica que esta opción no se tiene en cuenta en el editor.
  • expandir (stretch): El control se expande horizontalmente.

Otras características

También se pueden definir las siguientes características:

• Espacio entre columnas (column-gap): Establece el espacio entre las columnas.
• Espacio entre filas (row-gap): Establece el espacio entre las filas.
• CSS adicional: Código CSS personalizado con los anclajes deseados. Este código CSS sobrescribe los parámetros.