Angular - Flex Layout

Flex or Flexbox Layout is a layout mode introduced in CSS3 to align and position HTML elements. The CSS (Cascading Style Sheet) is a language used to style HTML elements by controlling the text color, background color, fonts, and spacing between elements.

However, developers used to face a lot of challenges while using CSS to create complex, responsive, and flexible designs. The issue was with the alignment and positioning of elements.

To solve this problem, W3C created a new layout system which is called as Flexbox Layout. This layout system gives complete control over the direction, alignment, order, and size of the HTML elements. You can easily use this within angular applications. In this tutorial, we are going to learn how to create a flex layout using flexbox in angular.

What is Flex Layout?

Flex Layout is used to arrange HTML elements in horizontal (rows) and vertical (columns) direction. It align and distribute spaces between different elements dynamically by altering their width and height, even when the screen size is unknown. It is important to note that the Flexbox Layout should be used only for one-dimensional layout.

Flex Layout Properties

The table given below shows some of the flexbox properties that are used more often −

• flex-direction: Sets the flex direction of the flex items. Its values could be row and column.
• flex-wrap: Sets whether flex items should wrap onto the next line.
• justify-content: Sets the alignment of flex items along the main axis.
• align-items: Sets the alignment of flex items along the cross axis.
• flex-grow: Sets flex item to grow within a flex container.

Features of Flex Layout

The reason to use flexbox to design your angular application lies in its features. Let's see some key features of flex layout −

• Flex Layout helps in arranging the items on a web page in any direction such as left to right, right to left, top to bottom, and bottom to top.
• You can create layouts that automatically adjust to different screen sizes. It allows you to set breakpoints and define how elements should behave when the screen width changes.
• Using Flexbox, you can rearrange the order of the contents of a web page.
• You can wrap contents of a web page in single line as well as multiple lines in both horizontal and vertical direction.
• Using Flexbox, you can align the contents of the webpage with respect to their parent container.
• You can also increase or decrease the size of the items in the page to fit in available space.

Angular Flex Layout

Starting from Angular v15, the Flex Layout library has been deprecated and is no longer recommended for use. In its earlier versions, this library had a set of directives to control the positioning, alignment, and spacing of elements in an Angular application.

It was based on the CSS Flex-box model, which allowed developers to arrange and align elements in rows or columns, and control how they behaved when the screen size changed. Instead of manually writing CSS, developers could use these pre-defined directives .

Using Flex Layout in Angular

To use flex layout in angular, follow the steps given below −

Step 1: The first step is to setup an angular application, which we can do by using the following command in CLI −

ng new flex-app

We named the application, flex-app. You can use any.

Step 2: Now, use the cd command to navigate to the newly created angular application.

cd flex-app

Step 3: Open app.component.html and add the code given below −

<div class="parent-container">
    <div class="child-container">
        <p>Tutorials Point Pvt Ltd</p>
    </div>
    <div class="child-container">
        <input type="text" placeholder="Search" />
    </div>
    <div class="child-container">
        <p>Library</p>
        <p>Courses</p>
        <p>Certifications</p>
    </div>
</div>

Step 4: In the app.component.css file use the following CSS to style the application using flexbox layout −

.parent-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: rgb(22, 102, 75);
    padding: 12px;
}
.child-container {
    width: 33%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 22px;
}
input {
    padding: 10px 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

Step 5: Now run the application using ng serve command. The following output will be displayed −