Curso IT Fundamentos CSS 032_Diseño flexible Flex

Diseño flexible Flex

Durante mucho tiempo, las únicas herramientas confiables y compatibles entre navegadores para crear diseños CSS eran float y position. Estas dos herramientas funcionan muy bien en la mayoría de los casos, pero en algunos aspectos tienen ciertas limitaciones que dificultan la realización de tareas.

Los siguientes requisitos de diseño simples son difíciles o imposibles de implementar de manera conveniente y flexible con estas herramientas (float y position):

• Centrar verticalmente un bloque de contenido dentro del contenido padre.
• Hacer que todos los elementos hijos de un contenedor ocupen la misma cantidad de ancho/alto disponible, independientemente de cuánto ancho/alto esté disponible.
• Hacer que todas las columnas en un diseño de varias columnas adopten la misma altura, incluso si contienen diferentes cantidades de contenido.

El diseño Flex de CSS es una poderosa herramienta de diseño en CSS que se puede utilizar para crear varios diseños flexibles. Para dominar el diseño Flex de CSS, es necesario dominar los siguientes conocimientos:

• Contenedor flex (flex container): El diseño Flex consta de contenedores flex y elementos flex. El contenedor flex es el contenedor que coloca los elementos flex en el diseño Flex. El contenedor flex puede ser cualquier elemento, pero normalmente se utiliza el elemento div.
• Elemento flex (flex item): Los elementos flex son los elementos colocados en el contenedor flex. Los elementos flex pueden ser cualquier elemento, pero normalmente se utiliza el elemento div.
• Eje principal (main axis): El eje principal es la dirección horizontal o vertical de los elementos en el diseño Flex.
• Eje transversal (cross axis): El eje transversal es la dirección vertical u horizontal de los elementos en el diseño Flex.

Propiedades del contenedor flex

El contenedor flex tiene las siguientes propiedades para controlar el diseño Flex:

• display: Establece el modo de visualización del contenedor flex. El contenedor flex debe establecerse en display: flex o display: inline-flex para usar el diseño Flex.
• flex-direction: Establece la dirección del eje principal del diseño Flex. Los valores pueden ser: flex-start alineación al inicio del eje principal, flex-end alineación al final del eje principal, row eje principal dispuesto horizontalmente, row-reverse eje principal dispuesto horizontalmente en sentido inverso, column eje principal dispuesto verticalmente, column-reverse eje principal dispuesto verticalmente en sentido inverso.
• flex-wrap: Controla si los elementos dentro del contenedor flex se envuelven. nowrap valor predeterminado, no se envuelve, wrap se envuelve, wrap-reverse envoltorio inverso.
• flex-flow: Abreviatura de flex-direction y flex-wrap, dos valores que corresponden respectivamente a flex-direction y flex-wrap.
• justify-content: Establece la alineación de los elementos flex en el eje principal del contenedor flex. Los valores pueden ser: flex-start alineación al inicio del eje principal, flex-end alineación al final del eje principal, center alineación central del eje principal, space-between alineación uniforme del eje principal (contenedor alineado al inicio y al final), space-around alineación uniforme del eje principal (espacios iguales entre elementos) o space-evenly alineación uniforme del eje principal (incluidos espacios iguales en ambos lados).
• align-items: Establece la alineación de los elementos flex en el eje transversal del contenedor flex. Los valores pueden ser: flex-start alineación al inicio del eje transversal, flex-end alineación al final del eje transversal, center alineación central del eje transversal, stretch valor predeterminado o baseline alineación de la línea base del texto de la primera línea del eje transversal. Solo actúa sobre los elementos hijos del contenedor flex.
• align-content: Al igual que align-items, es una propiedad para controlar la alineación de los elementos hijos en el eje transversal, que solo tiene efecto cuando el contenedor flex tiene múltiples ejes (múltiples filas o columnas).

Propiedades del elemento flex

Los elementos flex tienen las siguientes propiedades para controlar el diseño de los elementos flex en el diseño Flex:

• flex-grow: Establece la proporción de expansión del elemento flex en el eje principal. El valor puede ser un número de punto flotante entre 0 y 1.
• flex-shrink: Establece la proporción de reducción del elemento flex en el eje principal. El valor puede ser un número de punto flotante entre 0 y 1.
• flex-basis: Establece el ancho o alto predeterminado del elemento flex en el eje principal. El valor puede ser un valor de longitud, un valor de porcentaje o auto.
• order: Establece el orden del elemento flex en el eje principal. El valor puede ser un número entero entre 1 y 65535.

Ejemplo:

1
/* Estilo del contenedor flex */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Dirección del eje principal horizontal */
5
    justify-content: space-around; /* Alineación en el eje principal */
6
    align-items: center; /* Alineación en el eje transversal */
7
    height: 200px; /* Establecer altura del contenedor */
8
    border: 2px solid #333; /* Agregar borde para mejor visualización */
9
}
10
/* Estilo del elemento flex */
11
.flex-item {
12
    flex: 1; /* Dividir el espacio del eje principal en partes iguales */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Contenedor flex -->
2
<div class="flex-container">
3
    <!-- Elemento flex 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Elemento flex 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Elemento flex 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Efecto: