实现代码：
<!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> <div> <div>nav1</div> <div>nav2</div> <div>nav3</div> </div> <div> <div>固定栏：内容内容内容内容内容内容内容内容内容内容</div> <div>可扩展栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</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> 四.小结本文主要提供了三个实例，来实际应用下flex的属性。通过对比其他的实现方式，可以看出使用Flex布局可以优雅地实现相同的CSS布局问题。如有问题，欢迎指正。