1、效果展示
2、布局与样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试弹性盒子</title>
</head>
<body>
<div class="out-parent"><div class="left"><div style="margin: auto">左侧固定180px</div></div><div class="middle"><div style="margin: auto">中间固定伸缩</div></div><div class="right"><div style="margin: auto">右侧固定150px</div></div>
</div>
</body>
<style>/**将父容器作为一个弹性盒子，左中右弹性布局*/.out-parent {display: flex;background: aquamarine;width: 100%;height: 200px;}/** display: flex; justify-items: center; align-items: center; 将左侧div仍然看做一个盒子，内部弹性布局 */.left {flex: 0 0 180px;background: cadetblue;height: 100%;text-align: center;display: flex;justify-items: center;align-items: center;}.middle {flex: 1;background: darkmagenta;height: 100%;text-align: center;display: flex;justify-items: center;align-items: center;}.right {flex: 0 0 150px;background: coral;height: 100%;text-align: center;display: flex;justify-items: center;align-items: center;}
</style>
</html>
