Open In App

How to align items in a flex container with JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically setting the alignment of items in the container is necessary.

Syntax:

document.getElementById("elementId")
.style.alignItems="flex-start | flex-end | center"

The below examples demonstrate how to align items using JavaScript.

Example 1: In this example, the items will be aligned to the start of the container.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        #flex-container {
            display: flex;
            background-color: #f1f1f1;
            width: 50%;
            height: 250px;
        }
 
        #flex-container>div {
            background-color: rgb(33, 246, 107);
            color: "#000000";
            width: 100px;
            margin: 15px;
            text-align: center;
            line-height: 75px;
            font-size: 35px;
        }
    </style>
</head>
 
<body>
    <div id="flex-container">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <button onclick="align()">Align</button>
    <script>
        function align() {
 
            // Set the required alignment
            document.getElementById("flex-container")
                .style.alignItems = "flex-start";
        }
    </script>
</body>
</html>


Output:

Example 2: In this example, the items will be aligned to the end of the container.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        #flex-container {
            display: flex;
            background-color: #f1f1f1;
            width: 50%;
            height: 250px;
        }
 
        #flex-container>div {
            background-color: rgb(33, 246, 107);
            color: "#000000";
            width: 100px;
            margin: 15px;
            text-align: center;
            line-height: 75px;
            font-size: 35px;
        }
    </style>
</head>
 
<body>
    <div id="flex-container">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <button onclick="align()">Align</button>
    <script>
        function align() {
 
            // Set the required alignment
            document.getElementById("flex-container")
                .style.alignItems = "flex-end";
        }
    </script>
</body>
</html>


Output:

Example 3: In this example, the items will be aligned to the center of the container.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        #flex-container {
            display: flex;
            background-color: #f1f1f1;
            width: 50%;
            height: 250px;
        }
 
        #flex-container>div {
            background-color: rgb(33, 246, 107);
            color: "#000000";
            width: 100px;
            margin: 15px;
            text-align: center;
            line-height: 75px;
            font-size: 35px;
        }
    </style>
</head>
 
<body>
    <div id="flex-container">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <button onclick="align()">Align</button>
    <script>
        function align() {
 
            // Set the required alignment
            document.getElementById("flex-container")
                .style.alignItems = "center";
        }
    </script>
</body>
</html>


Output:



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads