Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .align-items-flex-start { display: flex; align-items: flex-start; background-color: floralwhite; width: 600px; height: 600px; } .align-items-center { display: flex; align-items: center; background-color: lightgray; width: 600px; height: 600px; } .align-items-flex-end { display: flex; align-items: flex-end; background-color: honeydew; width: 600px; height: 600px; } .align-items-stretch { display: flex; align-items: stretch; background-color: lightgray; width: 600px; height: 600px; } .flex-item { background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; height: 100px; } </style> <body> <div class="align-items-flex-start"> <div class="flex-item">Flex Start Item 1</div> <div class="flex-item">Flex Start Item 2</div> <div class="flex-item">Flex Start Item 3</div> </div> <div class="align-items-center"> <div class="flex-item">Center Item 1</div> <div class="flex-item">Center Item 2</div> <div class="flex-item">Center Item 3</div> </div> <div class="align-items-flex-end"> <div class="flex-item">Flex End Item 1</div> <div class="flex-item">Flex End Item 2</div> <div class="flex-item">Flex End Item 3</div> </div> <div class="align-items-stretch"> <div class="flex-item">Stretch Item 1</div> <div class="flex-item">Stretch Item 2</div> <div class="flex-item">Stretch Item 3</div> </div> </body> </html>
console output