Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flexbox-container { display: flex; border: 1px solid black; margin-bottom: 10px; height: 200px; } .flex-item { background-color: lightgray; margin: 5px; padding: 10px; border: 1px solid red; } .align-items-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } </style> <body> <div class="flexbox-container align-items-start"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-container align-items-center"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-container align-items-end"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> </html>
console output