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; justify-content: space-between; align-items: center; /* Use another value to see the result */ height: 250px; padding: 15px; background-color: #1faadb; } .flex-container > div { width: 15%; height: 100%; border-radius: 3px; background-color: #8ebf42; } .flex-container .one { height: 60%; } .flex-container .three { height: 40%; } .flex-container .four { height: 70%; } </style> </head> <body> <div class="flex-container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> </body> </html>