使用flex对页面进行平均分布局

44次阅读

共计 735 个字符，预计需要花费 2 分钟才能阅读完成。

页面效果

代码：

<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>

正文完