<!DOCTYPE html> <html> <head> <title>CSS3 Dimentions Flexboxes</title> </head> <body> <style type="text/css"> .flex_container { width: 300px; min-height: 150px; margin: 0 auto; color:#FFF; font-size: 32px; border:1px solid #0099da; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } .flex_container div{padding: 10px;} .column_1 { width: 50px; height: 70px; background: #F60;} .column_2 { width: 80px; height: 100px; background: #0099da;} .column_3 { width: 110px; height: 90px; background: #606;} </style> <div class="flex_container"> <div class="column_1">1</div> <div class="column_2">2</div> <div class="column_3">3</div> </div> </body> </html>
Output :
Topic :
Dimentions Flexboxes
