css3●▂● flex合理布局完成均值分派原素的实例

日期：2020-12-11 类型：科技新闻 

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

文中关键详细介绍了css3 flex合理布局完成均值分派原素，为自己留个手记，也共享给大伙儿，实际以下：

事例一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>flex 合理布局</title>
  <style> 
    *{
      padding:0;
      margin:0;
    }
    body,html{
      height: 100vh;
      min-width: 800px;
    } 
    .container{
      display:flex;
      flex-wrap:wrap;
      display: -webkit-flex; /* Safari */
    }
    .container>.item{
      border: 1px solid black;
      flex:1; 
      height:100px;
      background: #abcdef;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item"></div>
    <main class="item"></main>
    <div class="item"></div>
  </div>
</body>
</html>

事例二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>flex 合理布局</title>
  <style> 
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
    }
    body,html{
      width: 100%;
      height: 100vh;
      min-width: 800px;
      display:flex;
      display: -webkit-flex; /* Safari */
      justify-content: center;
      align-items: center;
    } 
    .container{
      width: 300px;
      height: 300px;
      display:flex;
      display: -webkit-flex; /* Safari */
      flex-wrap: wrap;
    }
    .container>.item{
      flex:0 0 33.3%; 
      height:100px;
      background: #abcdef;
      border: 1px solid red;
    }
    main{
      flex:0 0 33.3%; 
      height:100px;
      background-color: #ccc;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
  </div>
</body>
</html>


 

flex:0 0 33.3% 非常于flex-basis:33.3%，使每个原素的总宽占表层器皿的33.3%，因而每列数最多可以排开三个原素。

flex-wrap:wrap 表明每列铺满时候全自动换行。

事例三：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>flex 合理布局</title>
  <style> 
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
    }
    body,html{
      width: 100%;
      height: 100vh;
      min-width: 800px;
      display:flex;
      display: -webkit-flex; /* Safari */
      justify-content: center;
      align-items: center;
    } 
    .container{
      width: 300px;
      height: 300px;
      margin: 50px;
      display:flex;
      display: -webkit-flex; /* Safari */
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .container>.item{
      flex:0 0 30%; 
      height:90px;
      background: #abcdef;
      border: 1px solid red;
    }
    main{
      flex:0 0 30%; 
      height:90px;
      background-color: #ccc;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
  </div>
</body>
</html>


 

justify-content:space-between表明主轴方位的过剩室内空间均值分派在两组item中间。

到此这篇有关css3 flex合理布局完成均值分派原素的实例编码的文章内容就详细介绍到这了,大量有关flex均值分派原素內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：建立吸引住浏览者的网站內容的14种方式 返回下一篇：浅谈CSS3✤ 用text