Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flexbox-justify-content-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; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } </style> <body> <div class="flexbox-justify-content-container justify-content-start"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-justify-content-container justify-content-center"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-justify-content-container justify-content-end"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-justify-content-container justify-content-space-between"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div class="flexbox-justify-content-container justify-content-space-around"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> </html>
console output