css-flex 面試題
- 內容寬度等分
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; } .main div{ flex:1; height:100%; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html> -
左右佈局，一側定寬一側自適應填滿
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; } .left,.right{ height:100%; border:1px solid #333; box-sizing:border-box; } .left{ width:300px; } .right{ width:100%; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html> -
未知高度上下左右居中
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; justify-content:center; align-items:center; } .box{ width:300px; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box">未知高度上下左右居中</div> </div> </body> </html> -
文字居中
<html> <head> <style type="text/css"> .main{ height:100%; justify-content:center; align-items:center; } .box{ display:flex; justify-content:center; align-items:center; width:300px; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box">文字垂直居中</div> </div> </body> </html>