How to align items in a flex container with JavaScript ? Last Updated : 06 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like 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: Comment More infoAdvertise with us Next Article How to Align Items and Space with Flex in Tailwind CSS? S swapnil074 Follow Improve Article Tags : JavaScript HTML-Tags CSS-Properties JavaScript-Questions Similar Reads How to align flexbox container into center using JavaScript ? In this article, we will set the alignment of content using JavaScript. The DOM Style alignContent property is used to align the items of a flexible container when they do not use all available space on the cross-axis.Syntax:object.style.alignContent = "center"Property Value:center: It is used to pl 1 min read How to Align Items and Space with Flex in Tailwind CSS? Flex allows you to structure the elements in a container with precise control over alignment and spacing. Tailwind CSS provides utility classes to use Flexbox for aligning items and distributing space between them. By using classes like justify-between and justify-around, you can easily create layou 3 min read 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 3 min read How to Center a Flex Container but Left-Align Flex Items? When we use CSS Flexbox, we might encounter situations where we want to center a flex container within its parent while keeping the flex items inside it left-aligned. This interface is very common in web design to create balanced and visually appealing interfaces. Below are different approaches to c 4 min read How to Control Ratios of Flex Items Along the Main Axis in CSS? Flexbox in CSS is a powerful tool for aligning elements in rows or columns. It allows you to easily control the size and distribution of items, making it possible to adjust their relative sizes. For example, you can make one element larger than the others, creating responsive and dynamic layouts wit 3 min read How to Set a Flex Container to Match the Width of Its Flex Items? Flexbox is a powerful layout model in CSS that simplifies the process of designing responsive layouts. One common scenario is needing the flex container to dynamically adjust its width to match the combined width of its flex items. By default, flex containers expand to fill the available space, but 2 min read Like