How to usealign-items and display property in CSS

Q: How to usealign-items and display property in CSS

The align-items and display property of CSS are used to align items at the end of the container. To align items at the end of the container, we set the align-items value to flex-end and the display value to flex.

Approach 2 :Using Align Self:

The align-items and display property of CSS are used to align items at the end of the container. To align items at the end of the container, we set the align-items value to flex-end and the display value to flex.

Syntax:

display:flex;
align-items: flex-end;

Example: In this example, we will align them to the flex end using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .gfg {
            border: solid 5px red;
            width: 50vh;
            height: 50vh;
            font-size: 50px;
            color: rgb(0, 167, 0);
            display: flex;
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <div class="gfg">
        <div>w3wiki</div>
    </div>
</body>

</html>

Output:

How to align item to the flex-end in the container using CSS ?

Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items to the end of the main axis, aligning them to the right if it’s a horizontal layout or to the bottom if it’s vertical.

here are some common approaches: