|
|
|
|
|
|
|
|
- Presentación
- ¿Cómo proceder?
Ejemplo Flexbox: proporción de redimensionamiento para distribuir el espacio disponible entre los controles
El contenedor flexbox permite definir las proporciones de redimensionamiento de los distintos controles para que ocupen un espacio determinado. Con el control Flexbox, puede establecer una proporción para cada control. Esta proporción se aplicará a medida que se amplíe la página. En el siguiente ejemplo, hay 4 áreas de entrada (controles Campo de entrada) dentro de un control Looper.
Cuando el navegador se amplía horizontalmente, las 2 primeras áreas de entrada deben permanecer con un ancho fijo y el espacio adicional debe distribuirse de la siguiente manera: 20 % para la tercera área (Full name) y 80 % para la cuarta área (Description).
Estos anclajes pueden definirse con un control Flexbox. Observación: Esta página se basa en el ejemplo "WW_Flexbox". Para definir anclajes específicos en los controles Campo de entrada que se encuentran dentro de un control Looper, puede: - Crear un control Flexbox. Este control Flexbox debe estar dentro de una fila del control Looper y contener los diferentes controles Campo de entrada. En nuestro ejemplo, hay 4 controles Campo de entrada.
- Los diferentes controles se muestran en la pestaña "General" de la descripción del control Flexbox. Para obtener el comportamiento de redimensionamiento deseado, simplemente especifique un valor flex-grow para el tercer y cuarto control. En nuestro caso, hay cuatro controles Campo de entrada. Modifique las siguientes opciones:
- establezca el valor flex-grow del tercer campo de entrada en 20.
- establezca el valor flex-grow del cuarto campo de entrada en 80.
- No es necesario realizar cambios en la pestaña "Detalles".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|