css flex實現經典的三欄佈局
阿新 • • 發佈：2019-02-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 三欄式佈局</title> <style> *{ margin: 0; padding: 0; } .wrapper{ display: flex; display: -webkit-flex; display: -moz-flex; flex-direction: row; width: 600px; height: 200px; box-sizing: border-box; border: 1px solid red; margin: 0 auto; } .middle{ flex: 1; height: 150px; background-color: gold; } .left{ flex-basis: 100px; order: -1; height: 170px; background-color: skyblue; } .right{ flex-basis: 100px; height: 170px; background-color: purple; } </style> </head><body> <div class="wrapper"> <div class="middle">中間佈局</div> <div class="left">左側佈局</div> <div class="right">右側佈局</div> </div> </body> </html>