Descripción general de Flex (1.0)

¿Qué es Flex?

Flex es un nuevo modo para diseñar secciones y páginas, basado en la nueva tecnología de edición en línea y en diseños flexibles como: cuadrícula CSS, flex, alineación mejorada, etc. Flex permite una total capacidad de respuesta y una precisión de píxeles para cualquier elemento mediante puntos de ruptura.

Flex se integra perfectamente en el editor existente para que los usuarios puedan elegir cuándo y dónde usarlo. Esto significa que Flex contiene todas las mismas ventajas que nuestro editor, pero con muchas más capacidades de diseño.

Añadir secciones de Flex

Para agregar una sección de Flex:

1. Mantenga el cursor entre filas y haga clic en el botón Agregar sección. Las secciones se muestran en el panel lateral. También puede hacer clic con el botón derecho para abrir el menú contextual y, luego, hacer clic en Añadir sección.
2. En el panel lateral, haga clic en Secciones Flex.
3. Haga clic en la sección Flex que desee añadir y, en la parte superior de la pantalla, haga clic en Guardar.
4. Se abre el modo Flex con la sección a editar.

Para obtener más información, consulte Añadir y editar secciones de Flex (1.0).

Descripción general del Modo Flex

Panel de capas

El panel de capas se muestra en la parte izquierda del editor y presenta los elementos de la página (cuadrículas, widgets, flexboxes, cuadros de texto, etc.). Desde aquí se pueden seleccionar, reorganizar y renombrar los elementos. El panel de capas siempre comienza con la sección, debajo de ella están las cuadrículas seguidas de los widgets o contenedores.

Además, puede navegar entre los elementos de las siguientes formas:

• Seleccione un elemento en la cuadrícula y señale el elemento en el menú que aparece arriba.
  
• Haga clic en la ruta de navegación arriba del panel de diseño.

Panel de diseño

El panel de diseño se muestra en la parte derecha del editor y contiene sus controles de diseño para el elemento seleccionado (contenedor, flexbox, widget). Las opciones de diseño incluyen el diseño, el tamaño, la alineación, y más.

Medidas del tamaño del panel de diseño

En Flex, tiene varias medidas de tamaño.

• Píxel (px). El tamaño permanece igual en cada punto de ruptura.
• Ancho de ventana (vw). % de la anchura del elemento cuando se muestra en una pantalla determinada. 10 vw es el 10 % de la anchura de la ventana. 100 vw ocupa el 100 % del ancho de la pantalla. De forma predeterminada, los márgenes y los tamaños de los widgets se establecen en %.
• Alto de ventana (vh). % de la altura de un elemento cuando se muestra en una pantalla determinada. 10 vh es el 10 % de la altura de la ventana en cada tamaño de pantalla.
• A. El contenido determina automáticamente el tamaño.
• Mínimo y máximo. La medida más pequeña/más grande de un elemento. Este ajuste garantiza que un elemento no se haga más pequeño/más grande que esto cuando se cambia el tamaño.

Alineación

Ordenar

Puede reorganizar los objetos superpuestos tanto en el panel de diseño como en el de capas, simplemente arrastrando el objeto por debajo o por encima.

Alineación automática de Flexbox vs alineación

Para los flexboxes, hay dos configuraciones diferentes de alineación automática en el panel de diseño.

• En Diseño, seleccione Diseño Vertical u Horizontal para establecer un eje para los elementos dentro del flexbox.
• En Alineación en Flexbox, seleccione cómo se colocarán los elementos en el eje seleccionado.
  
• En Alinear, seleccione cómo se alineará todo el flexbox con respecto a la cuadrícula. Únicamente se puede alinear bajo el eje contrario.
  
• En Alinear, seleccione dónde se alinea un elemento dentro de un flexbox (por ejemplo, un botón) en el eje de diseño automático elegido.
  

PIN

En el panel de diseño, puede anclar elementos a una posición específica en una celda, de modo que la ubicación permanezca igual en relación con la celda cuando el tamaño de esta cambie.

Para anclar un elemento a una posición en una celda:

1. Seleccione el elemento y, en el panel de diseño, desplácese a Posición.
2. Junto a Anclar, haga clic en la flecha correspondiente al lugar donde desea anclar el elemento en la celda.
   

El elemento se mantiene anclado a esta ubicación en la celda cuando el tamaño de la cuadrícula cambia.

Puntos de ruptura

Un punto de ruptura es el tamaño en el que el diseño se ajusta a un ancho de pantalla específico. Los puntos de ruptura permiten que los diseños se adapten a medida que se escalan hacia arriba y hacia abajo. En Flex, los puntos de ruptura predeterminados son los siguientes:

• Desktop (1025 px a 1399 px)

• Desktop ancho (1400 px en adelante)

• Tableta (768 px a 1024 px)

• Móvil (767 px y menos)

• Móvil horizontal (468 px a 767 px)

Usted puede cambiar entre los puntos de ruptura en la parte superior de la página haciendo clic en las diferentes vistas.

También puede ocultar ciertos elementos en puntos de ruptura específicos. Para obtener más información sobre los puntos de ruptura y cómo ocultar elementos, consulte Puntos de ruptura de Flex (1.0).