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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
