二.固定欄-可擴充套件欄頁面佈局
阿新 • • 發佈：2018-12-17
實現效果：
實現程式碼：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style type="text/css"> body { margin: 0; padding: 0; } .container { width: 300px; height: 200px; border: 1px solid blue; display: flex; flex-direction: column; } .nav { height: 50px; background-color: grey; display: flex; flex-direction: row; } .nav-item { min-width: 60px; border: 1px solid orangered; } .main { display: flex; flex-direction: row; flex: 1; /*main區域需要自動擴充套件*/ } .main-left { width: 100px; /*main中的left區域固定*/ background-color: #DC698A; } .main-right { background-color: #3EACDD; flex: 1; /*main中的right區域需要自動擴充套件*/ } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="container"> <div class="nav"> <div class="nav-item">nav1</div> <div class="nav-item">nav2</div> <div class="nav-item">nav3</div> </div> <div class="main"> <div class="main-left">固定欄：內容內容內容內容內容內容內容內容內容內容</div> <div class="main-right">可擴充套件欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </div> </div> </body> <script type="text/javascript"> (function run() { $(".container").animate({ width: 500, height: 300 }, 1500, () => { $(".container").animate({ width: 300, height: 200 }, 1500, run) } ) }()); </script> </html>