Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .flex-container { display: flex; padding: 10px; margin-bottom: 20px; background-color: #1faadb; } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .center { justify-content: center; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .flex-start { justify-content: flex-start; } .flex-container > div { width: 28%; height: 45px; margin: 5px; border-radius: 3px; background-color: #8ebf42; } .flex-container > div.item-two { width: 18%; } </style> </head> <body> <p>flex-start</p> <div class="flex-container flex-start"> <div></div> <div class="item-two"></div> <div></div> </div> <p>flex-end</p> <div class="flex-container flex-end"> <div></div> <div class="item-two"></div> <div></div> </div> <p>center</p> <div class="flex-container center"> <div></div> <div class="item-two"></div> <div></div> </div> <p>space-between</p> <div class="flex-container space-between"> <div></div> <div class="item-two"></div> <div></div> </div> <p>space-around</p> <div class="flex-container space-around"> <div></div> <div class="item-two"></div> <div></div> </div> </body> </html>