页面效果
代码：
<div class="container"> <div class="row"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> <div class="row"> <div class="child1" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> </div> <div class="row"></div></div><style>.container { height: calc(100vh - 70px); padding: 10px 10px 0 10px; display: flex; flex-direction: column;}.row { flex: 1; background-color: lightblue; border: 1px solid #ccc; display: flex;}.child{ flex:1;}.child1{ flex:2;}</style>