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; margin-bottom: 20px; } .flex-container div { flex-grow: 0.2; padding: 30px 5px; margin-right: -2px; border: 2px solid #8ebf42; } .flex-container div.two { flex-grow: 5; } .flex-container span { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; margin: auto; border-radius: 50%; background-color: #8ebf42; font-size: 28px; font-weight: 700; color: #fff; } </style> </head> <body> <div class="flex-container"> <div> <span>1</span> </div> <div> <span>2</span> </div> <div> <span>3</span> </div> <div> <span>4</span> </div> <div><span>5</span> </div> </div> <div class="flex-container"> <div> <span>1</span> </div> <div class="two"> <span>2</span> </div> <div> <span>3</span> </div> <div> <span>4</span> </div> <div> <span>5</span> </div> </div> </body> </html>