Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .justify-content-start { display: flex; justify-content: flex-start; background-color: lightgray; } .justify-content-center { display: flex; justify-content: center; background-color: lightgray; } .justify-content-end { display: flex; justify-content: flex-end; background-color: lightgray; } .justify-content-space-between { display: flex; justify-content: space-between; background-color: lightgray; } .justify-content-space-around { display: flex; justify-content: space-around; background-color: lightgray; } .flex-item { background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; } </style> <body> <div class="justify-content-start"> <div class="flex-item">Start Item 1</div> <div class="flex-item">Start Item 2</div> <div class="flex-item">Start Item 3</div> </div> <div class="justify-content-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="justify-content-end"> <div class="flex-item">End Item 1</div> <div class="flex-item">End Item 2</div> <div class="flex-item">End Item 3</div> </div> <div class="justify-content-space-between"> <div class="flex-item">Space Between Item 1</div> <div class="flex-item">Space Between Item 2</div> <div class="flex-item">Space Between Item 3</div> </div> <div class="justify-content-space-around"> <div class="flex-item">Space Around Item 1</div> <div class="flex-item">Space Around Item 2</div> <div class="flex-item">Space Around Item 3</div> </div> </body> </html>
console output