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

页面效果

代码:

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据