Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flex-container { display: flex; background-color: lightgray; width: 600px; height: 600px; } .align-self-flex-start { align-self: flex-start; background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; height: 100px; } .align-self-center { align-self: center; background-color: lightblue; padding: 10px; margin: 5px; width: 100px; height: 100px; } .align-self-flex-end { align-self: flex-end; background-color: lightgreen; padding: 10px; margin: 5px; width: 100px; height: 100px; } </style> <body> <div class="flex-container"> <div class="align-self-flex-start">Align Self Start</div> <div class="align-self-center">Align Self Center</div> <div class="align-self-flex-end">Align Self End</div> </div> </body> </html>
console output