<!DOCTYPE html> <html> <head> <style> .flex-container1 { display: flex; flex-direction: row; justify-content: flex-start; background-color: DodgerBlue; } .flex-container2 { display: flex; flex-direction: row; justify-content: flex-end; background-color: red; } .flex-container3 { display: flex; flex-direction: row; justify-content: center; background-color: tomato; } .flex-container4 { display: flex; flex-direction: row; justify-content: space-between; background-color: green; } .flex-container5 { display: flex; flex-direction: row; justify-content: space-around; background-color: skyblue; } .flex-item { background-color: #f1f1f1; margin: 5px; padding: 10px; font-size: 15px; width: 100px; } </style> </head> <body> <h2>Justify-Content: Flex-start</h2> <div class="flex-container1"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Justify-Content: Flex-end</h2> <div class="flex-container2"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Justify-Content: Center</h2> <div class="flex-container3"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Justify-Content: Space-between</h2> <div class="flex-container4"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Justify-Content: Space-around</h2> <div class="flex-container5"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> </body> </html>
