HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display: flex; flex-direction: row; width: 100%; min-height: 250px; border: 1px solid #8c8c8c; } #parent > div{ width: 90px; border: 1px solid #8c8c8c; margin: 10px; } </style> </head> <body> <h1>CSS align-items Property</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent"); function myFunction(){ x.style.alignItems = "center"; } </script> <p><strong>Note</strong>: Click on the button to change the 'align-items' from stretch (default) to center.</p> </body> </html>
OUTPUT
×

Save as Private