|
|
|
|
|
|
|
|
- Presentación
- ¿Cómo proceder?
Ejemplo Flexbox: disposición automática de los controles
Los controles Flexbox le permiten organizar los controles según sus propios criterios cuando cambia el tamaño del navegador. Veamos un ejemplo de configuración. Una página contiene 5 celdas con imágenes y texto. Estas 5 celdas se encuentran en un control Flexbox. Con el control Flexbox, cuando el navegador cambia de tamaño horizontalmente, las 5 celdas se posicionan automáticamente según 3 reglas: - las celdas deben distribuirse en una o varias filas en función del espacio horizontal disponible,
- todas las celdas deben permanecer justificadas,
- las celdas deben seguir teniendo el mismo tamaño.
Observación: Esta página se basa en el ejemplo "WW_Flexbox". Para reorganizar las celdas en función del tamaño del navegador: - Ubique los controles Celda en un control Flexbox: 3 celdas en la primera fila y 2 celdas en la segunda.
- Abra la descripción del control Flexbox. Las opciones que se pueden modificar se encuentran en la pestaña "Detalles" de la ventana de descripción.
Cada regla a aplicar corresponde a una opción:
- cuando se reduce el ancho del navegador, las celdas pasan a la siguiente fila:
Para aplicar esta regla, vaya a "Salto de línea (flex-wrap)" y elija la opción "con salto de línea (wrap)". - las celdas deben ocupar todo el espacio horizontal disponible y estar espaciadas uniformemente: Para aplicar esta regla, vaya a "Alineación horizontal (justify-content)" y elija "espacio alrededor de los elementos (space-around)".
- las celdas deben seguir teniendo el mismo tamaño: Para aplicar esta regla, vaya a "Alineación vertical en cada fila (align-items)" y elija la opción "al inicio (flex-start)".
Para obtener una interfaz limpia, el espaciado entre filas y columnas debe ser de 20 pixeles. Las opciones de anclaje del control Flexbox se establecen de forma que ocupe todo el espacio horizontal disponible y se adapte verticalmente para ajustarse al contenido. Este es el resultado en tiempo de ejecución: - Navegador maximizado:
- Navegador reducido:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|