To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertical axis) of the container.

Here we are using these approaches with the help of basic examples:

Using Justify-content Property

In this approach we are using the justify-content: flex-end; CSS property aligns flex items to the end of the container, pushing them to the right side horizontally.

Syntax:

.container {
    display: flex;
    justify-content: flex-end;
}

Example: In this example, we create a flex container with three red boxes aligned to the right due to the “justify-content: flex-end” CSS property.

Output:

Using align-item Property

In this approach align-items: flex-end is used to align flex items vertically at the bottom of a container. This property can be helpful if you want to align items in a flex container to the end of the cross-axis.

Syntax:

.container {
    display: flex;
    align-items: flex-end;
}

Example: in this example, three red boxes in a flex container, are vertically aligned at the bottom due to the “align-items: flex-end” CSS property.

Output: