Modelo de diseño CSS FlexBox | Explicado
Este artículo lo ayudará en los siguientes aspectos del modelo CSS FlexBox:
- ¿Qué es el modelo de diseño CSS Flexbox?
- ¿Qué es un contenedor CSS Flex?
- Características del modelo Flexbox
- Concepto básico del modelo de diseño CSS FlexBox
- Propiedades Flexbox
- Ejemplos
Vamos a empezar!
¿Qué es el modelo de diseño CSS Flexbox?
Es un módulo de diseño flexible disponible en CSS3 que ofrece una forma simple y clara de organizar elementos flexibles dentro de un contenedor. Nos ayuda a diseñar el diseño receptivo.
¿Qué es un contenedor CSS Flex?
Para trabajar con el modelo FlexBox, primero debemos entender qué es un contenedor flexible y para hacerlo, consideremos la figura dada por debajo:
En el fragmento anterior, el área gris representa un contenedor flexible mientras el elemento 1, el elemento 2, etc. son sus artículos. Entonces, podemos decir que el contenedor flexible es una caja/contenedor que puede contener múltiples elementos flexibles.
Características del modelo Flexbox
El modelo de diseño CSS FlexBox proporciona numerosas características, algunas de ellas se enumeran a continuación:
- En el modelo de diseño FlexBox CSS, no hay flotadores.
- CSS FlexBox proporciona un diseño receptivo y amigable para móviles.
- Los márgenes del contenedor flexible no colapsan con los márgenes de su contenido.
- Posicionar el elemento infantil es muy fácil en el modelo FlexBox.
- El orden del elemento se puede cambiar fácilmente sin editar la fuente HTML.
Concepto básico del modelo de diseño CSS FlexBox
Algunos de los conceptos básicos del modelo de diseño CSS FlexBox se enumeran a continuación:
- El modelo CSS FlexBox tiene la capacidad de alterar la altura y el ancho del elemento al mejor ajuste dentro del espacio libre disponible del contenedor.
- Flexbox es la dirección-agnóstico, lo que significa que los elementos de Flexbox se pueden organizar horizontalmente y verticalmente dependiendo de los requisitos.
Propiedades Flexbox
Para diseñar un diseño receptivo, una amplia gama de propiedades flexibles está disponible en CSS3 como se describe en las tablas dadas a continuación:
Tabla 1
| Propiedades | Descripción |
|---|---|
| mostrar | Determina el tipo de contenedor flexible, yo.mi., en línea, bloque. |
| dirección flexible | Especifica la dirección de los elementos dentro del contenedor, como el fondo superior, la izquierda, etc. |
| holgazán | Determina si los elementos deben estar envueltos o no. |
| flujo flexible | Proporciona las funcionalidades de Flex-Wrap y Flex-Direction. |
| Justify-Content | Alinea los elementos/elementos a lo largo del eje principal. |
| ítems alineados | Alinea los elementos a lo largo del eje cruzado. |
| alineado | Alinea las líneas del contenedor flexible. |
| brecha | Controla explícitamente los espacios entre los elementos flexibles. |
Tabla 2
| Propiedades | Descripción |
|---|---|
| orden | Controla el orden de los elementos infantiles dentro del contenedor flexible. |
| flácido | Determina el factor de crecimiento para un elemento flexible. |
| Flex-shrink | Determina el factor de contracción para elementos infantiles/elementos flexibles. |
| basis flexible | Determina el tamaño predeterminado del elemento infantil/elemento flexible. |
| doblar | Se usa para lograr las funcionalidades de tres propiedades i.mi. Flex-Crow, Flex-Shrink y Flex-Basis. |
| alinearse | Permite que se anule la alineación predeterminada (a lo largo del eje cruzado) para el elemento infantil individual. |
Las propiedades descritas en la Tabla 1 se conocen como contenedor flexible o elemento principal propiedades, mientras que las descritas en la Tabla 2 se conocen como artículos flexibles o elemento infantil propiedades.
Ejemplos
En esta sección, implementaremos las propiedades de los elementos FlexBox y los elementos de FlexBox de forma anterior prácticamente.
Ejemplo de Flexbox
Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
En el fragmento de código anterior, utilizamos varias propiedades de contenedores flexibles y elementos flexibles, como pantalla, dirección flexible, ítems alineados, brecha y crecimiento flexible que establecerán la pantalla flexible, la dirección de reverso de la fila, la alineación estirada, las filas de 5 px y las filas y las filas y las filas 5px GAB de columnas de 50px respectivamente, y el tercer elemento crecerá dos veces más rápido que otros elementos:
La salida verifica el funcionamiento de las propiedades de CSS Flexbox.
Conclusión
El modelo CSS Flexbox ofrece una forma fácil y limpia de organizar elementos FlexBox dentro de un contenedor. Proporciona numerosas características, como diseño receptivo, alineación simple de elementos, etc. Además, se pueden utilizar numerosas propiedades para diseñar y alinear los elementos de una mejor manera, como la dirección flexible, la envoltura flexible, los elementos alineados, el orden, el crecimiento flexible, etc. Este artículo discutió el modelo de diseño FlexBox, el contenedor flexible y sus propiedades.