demo12-flex系列之横向4块响应布局 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

  @media only screen and (min-width:1200px) {
    .wrap{
      display: flex;
      flex-wrap:wrap;
      background-color: red;
    }
    .inner{
      flex-grow:1;/*为了占满*/
      width:20%;/*范围可调整*/
      background-color: green;
      margin: 15px 10px;
    }
  }
    @media only screen and (min-width:992px) and (max-width:1199px){
      .wrap{
        display: flex;
        flex-wrap:wrap;
        background-color: red;
      }
      .inner{
        flex-grow:1;
        width:30%;/*有边界误差*/
        background-color: green;
        margin: 15px 10px;
      }
      .inner:last-child{
        flex-grow:0;/*横向放大倍数*/
        width:31.5%;/*由于设置了margin边界，导致此处width不是刚好30%，可能设置了固定宽度会有改善，未证实。*/
      }
    }
    @media only screen and (min-width:768px) and (max-width:991px){
      .wrap{
        display: flex;
        flex-wrap:wrap;
        background-color: red;
      }
      .inner{
        flex-grow:1;
        width:45%;/*有边界误差*/
        background-color: green;
        margin: 15px 10px;
      }
    }


    @media only screen and  (max-width:767px){
      .wrap{
        display:flex;
        flex-wrap:wrap;
        background-color: red;
      }
      .inner{
        flex-grow:1;/*当width 100%时随便填或不填*/
        width:100%;
        background-color: green;
        margin: 15px 10px;
      }
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
  <div class="inner">8</div>
  <div class="inner">9</div>
  <div class="inner">10</div>
  <div class="inner">11</div>
  <div class="inner">12</div>
</div>
说明：
<div>
  <p>1.flex-wrap:wrap 换行</p>
  <p>2.flex-grow:0    横向不放大</p>
  <p>3.width 子元素宽度设置比 flex-grow 好用，注意：受边界 margin，padding，border 的影响，另外当 width: 100% 时 flex-grow 可选，任意填</p>
  <p>4.flex 要作用于 mobile ，请在 head>meta 中设置。</p>
</div>
</body>
</html>

 

posted @ 2018-04-11 10:09  blackatall  阅读(48)  评论(0)    收藏  举报