自適應的經典佈局 少任意一個模組都能自適應
阿新 • • 發佈：2019-01-23
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 佈局</title> <link rel="stylesheet" href="index.css"> <style> .freeLayout-bd{ display: flex; width: 100%; height:100vh; } /*.left{ flex:1; } .right{ flex:1; }*/ .freeLayout-left{ width: 200px; } .freeLayout-right{ width: 250px; } .freeLayout-center{ flex:2; } .freeLayout-left{ background: #C7E0FE;} .freeLayout-center{ background: #ccc; height:100%;} .freeLayout-top,.freeLayout-bottom{ flex: 1; flex-direction:column; height: 100%; padding:10px; box-sizing: border-box; } .freeLayout-top{ background: #F0E68C;} .freeLayout-bottom{ background: #FFC0CB; } .freeLayout-center>div:nth-last-child(2){ height: 10% } .freeLayout-center>.freeLayout-top+.freeLayout-bottom{ height: 90%;} .freeLayout-right{ background: #30C37C;} </style> </head> <body> <div class="freeLayout-bd"> <div class="freeLayout-left"></div> <div class="freeLayout-center"> <div class="freeLayout-top"> </div> <div class="freeLayout-bottom"> </div> </div> <div class="freeLayout-right"></div> </div> </body> </html>