<!DOCTYPE html> <html> <head> <title>CSS3 Equal Flexboxes</title> </head> <body> <style type="text/css"> .flex-container { width: 80%; min-height: 150px; margin: 0 auto; text-align:center; font-size: 22px; color:#FFF; display: -webkit-flex; display: flex; border: 1px solid #808080; } .flex-container div { padding: 10px; background: #F60; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flex-container div.bg-alt{background: #0099da;} </style> <div class="flex-container"> <div class="item1">Column 1</div> <div class="item2 bg-alt">Column 2</div> <div class="item3">Column 3</div> </div> </body> </html>
Output :
Topic :
Equal Flexboxes
