<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body, html { height: 100%; color:white } #parent { height: 100px; background-color: #36e; display: flex; justify-content: space-between; flex-direction: row; } div.child1 { height: 100%; width: 50px; background-color: #111555; } div.child2 { flex: 1; background-color: #0f0; height: 100%; } div.child3 { height: 100%; width: 60px; background-color: red; } </style> </head> <body> <div id="parent"> <div class="child1">左侧</div> <div class="child2">中间</div> <div class="child3">右侧</div> </div> </body> </html>
原文：https://www.cnblogs.com/spencermo/p/14800545.html