Implementación de Flex Layout en Angular: una guía práctica

Hark Labs2022-05-12 · 13 min read

Implementación de Flex Layout en Angular: una guía práctica

Introducción

CSS Flex Layout se utiliza para crear diseños fluidos y flexibles. Sin embargo, al utilizar Angular existen escenarios en los que necesitamos un control más dinámico sobre los diseños. Además, el uso de CSS Flexbox requiere estilos complicados que pueden resultar difíciles para muchos desarrolladores. Flex Layout es un motor de componentes que tiene como objetivo resolver este problema. Proporciona un conjunto de directivas que están disponibles para su implementación en sus aplicaciones.

Flex Layout utiliza Typescript lo que lo hace ideal para aplicaciones Angular. No se necesitan hojas de estilo externas y se pueden utilizar diferentes directivas para crear diseños adaptables. En este tutorial, crearemos una aplicación Angular sencilla e inyectaremos Flex Layout para organizar nuestros componentes.

¡Comencemos!

Requisitos previos

Las aplicaciones Angular utilizan el entorno de ejecución de Node.js. Para completar este tutorial, necesitará tener instalado Node.js en su máquina de desarrollo. Tenemos una guía completa Cómo instalar Node.js en Ubuntu 18.04 que le ayudará a configurar Node.js fácilmente.
También necesitará tener cierta familiaridad con el uso de componentes de Angular y la configuración de un proyecto de Angular.

Configuración del proyecto

Aquí debemos realizar dos pasos:

Necesitamos configurar una nueva aplicación Angular.
Necesitaremos instalar Flex Layout desde npx para que podamos importarlo y usarlo en nuestra aplicación.

Para crear una nueva aplicación Angular, abra su terminal y ejecute el siguiente comando:

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

1	npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

Aquí estamos creando una nueva aplicación Angular utilizando @angular/cli. El nombre de nuestra aplicación es angular-flex-example. Utilizaremos CSS en lugar de Sass o Less para los estilos. Además, especificaremos que no necesitamos enrutamiento. Tampoco nos preocupan las pruebas, por lo que también las omitiremos.

Ahora que su aplicación está lista, navegue al directorio de la aplicación y ejecute el siguiente comando para instalar Flex Layout:

cd angular-flex-example
npm install @angular/flex-layout@10.0.0-beta.32

1 2	cd angular-flex-example npm install @angular/flex-layout@10.0.0-beta.32

Una vez que el comando anterior finalice la instalación, agregue el siguiente código en su módulo de aplicación para importar FlexLayoutModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],

    imports: [
        BrowserModule,
        FlexLayoutModule
    ],

    providers: [],

    bootstrap: [AppComponent]
})

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FlexLayoutModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

A continuación, ejecute el siguiente comando para asegurarse de que todo funcione como se espera:

npm start

npm start

Su aplicación se servirá en localhost:4200 de forma predeterminada. Navegue a esta URL en el navegador web. Verá el mensaje: “angular-flex-example is running!. Con esta configuración completa, diseñemos nuestra plantilla utilizando Flex Layout.

Crear el Flex Layout

Aquí agregaremos código en app.component.html para usar el Flex Layout con FlexLayoutModule. Nuestro resultado final sería similar a la siguiente imagen:

Para lograr el resultado anterior, abra el app.component.css en su editor y agregue las siguientes líneas de código:

.container {
    margin: 10px;
}

.item {
    border-radius: .2em;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 2em;
    padding: 4em 1em;
    text-transform: uppercase;
}

.item-1 {
    background-color: #009169;
}

.item-2 {
    background-color: #55b296;
}

.item-3 {
    background-color: #9fd3c3;
}

.item-4 {    
    background-color: #e7b013;
}

.item-5 {
    background-color: #073443;
}

.container {

margin: 10px;

}

.item {

border-radius: .2em;

color: #ffffff;

font-family: sans-serif;

font-size: 2em;

padding: 4em 1em;

text-transform: uppercase;

}

.item-1 {

background-color: #009169;

}

.item-2 {

background-color: #55b296;

}

.item-3 {

background-color: #9fd3c3;

}

.item-4 {

background-color: #e7b013;

}

.item-5 {

background-color: #073443;

}

Ahora que has añadido el código anterior, abre el archivo app.component.html y añade el siguiente código. Este código tiene dos divs contenedores y cinco divs internos:

<div class="container">
    <div class="item item-1">
    Elemento 1
    </div>
    
    <div class="item item-2">
    Elemento 2
    </div>
    
    <div class="item item-3">
    Elemento 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Elemento 4
    </div>
    
    <div class="item item-5">
    Elemento 5
    </div>

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Después de eso, compila y ejecuta tu aplicación. Verás cinco divs apilados uno encima de otro porque no hemos proporcionado ningún diseño hasta ahora. Para añadir el fxLayout añade el siguiente código:

<div class="container" fxLayout>
    <div class="item item-1">
    Elemento 1
    </div>

    <div class="item item-2">
    Elemento 2
    </div>

    <div class="item item-3">
    Elemento 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Elemento 4
    </div>
   
    <div class="item item-5">
    Elemento 5
    </div>

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

En el código anterior, después de aplicar este fxLayout, las propiedades CSS display:flex y flex-direction:row se aplican al div contenedors. Ahora, cuando ejecutes la aplicación, tendrás tres divs en la primera fila y dos divs en la fila inferior.

A continuación, añadimos fxLayoutAlign y fxLayoutGap para mejorar nuestro diseño:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Elemento 1
    </div>

    <div class="item item-2">
    Elemento 2
    </div>

    <div class="item item-3">
    Elemento 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Elemento 4
    </div>

    <div class="item item-5">
    Elemento 5
    </div>
</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Esto aplicará place-content: stretch center y align-items: stretch estilos al contenedor div. También aplicará 10px de espacio entre los elementos flex.

Ahora que hemos aplicado fxLayout, es hora de hacer que nuestro diseño sea responsivo:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Elemento 1
    </div>
    
    <div class="item item-2">
    Elemento 2
    </div>

    <div class="item item-3">
    Elemento 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Elemento 4
    </div>

    <div class="item item-5">
    Elemento 5
    </div>
</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Este código establecerá el punto de interrupción para las pantallas extra pequeñas xs . La pantalla cambiará el diseño de fila predeterminado a columna y el tamaño del espacio se reducirá de “10px” a “0px” en las pantallas extra pequeñas. Puedes probar esto ejecutando la aplicación y cambiando el tamaño de la ventana a xs (menos de 599px de ancho). Observarás cómo cambia el estilo.

Para varios tamaños de pantalla tenemos diferentes sufijos:

sm – pequeño
md – mediano
lg – grande
xl – extra grande

También tenemos directivas para elementos secundarios. Añade fxFlex como en el código de abajo:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Elemento 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Elemento 2
    </div>

    <div class="item item-3" fxFlex>
        Elemento 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        Elemento 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Elemento 5
    </div>

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Esto aplicará flex-grow: 1, flex-shrink: 1, y flex-basis: 100% al diseño. Si especificas el valor de ancho, se aplicará la propiedad max-width.

Agreguemos fxFlexOrder y fxFlexOffset:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-1" fxFlex="15%">
    Elemento 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Elemento 2
    </div>

    <div class="item item-3" fxFlex>
    Elemento 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    Elemento 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Elemento 5
    </div>

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Usando este código aplicamos order: 3 al segundo elemento. También establecerá el margin-left: 50px en el cuarto elemento. Ahora, si ejecutas la aplicación, verás que el segundo elemento está en la tercera posición de la fila, mientras que el cuarto elemento obtiene un espaciado de 30px desde el principio.

En resumen

En este tutorial, aprendimos cómo implementar Flex Layout en aplicaciones de Angular. Esto va a ser útil ya que podremos usar diseños CSS de Flexbox listos para usar sin tener que codificar los estilos nosotros mismos. Si necesitas más información, consulta la Wiki de Flex Layout en la página de GitHub.

Para simplificar las cosas en este tutorial, no utilizamos binding para enlazar valores en la clase del componente. Sin embargo, tanto el binding unidireccional como el bidireccional son posibles en la clase del componente [fxLayout]="la dirección de tu diseño". Esto te dará más control para construir diseños y se podrán manejar casos de uso dinámicos.

Las aplicaciones de Angular utilizan Node.js como su entorno de ejecución. Si deseas obtener más información sobre Node.js y cómo implementar aplicaciones de Node.js en Docker, consulta nuestro Cómo implementar una aplicación de Node.js (Express.js) con Docker en Ubuntu 20.04 tutorial. Para obtener más información sobre Angular, consulta nuestro tutorial Navegación con RouterLink, Navigate y NavigateByUrl en Angular Router.

¡Feliz programación!

Hark Labs

Autor · CloudSigma

Preslav Dobrev es diseñador creativo en CloudSigma, centrado en una identidad empresarial coherente mediante el uso de canales de marketing tradicionales e innovadores. Es experto en fusionar la visión artística con el marketing estratégico para crear narrativas de marca impactantes.

Implementación de Flex Layout en Angular: una guía práctica

Introducción

Requisitos previos

Configuración del proyecto

Crear el Flex Layout

En resumen

Hark Labs

Comentarios