How to align items in a flex container with JavaScript ?
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:
Please Login to comment...