移动端经典的flex布局

指明父元素为display：flex；然后给子元素一个flex值就可以按各元素所占的flex比值均分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen">
      .tab{
        display: flex;
        width: 100%;
        background: red;
        height: 40px;
        line-height: 40px;

      }
      .tab .tab-item{
        flex: 2;
        text-align: center;
      }
      .tab .tab-item:hover{
        background: blue;
      }
    </style>
    <title>d</title>
  </head>
  <body>

    <div class="tab">
      <div class="tab-item">
        apple
      </div>
      <div class="tab-item">
        pear
      </div>
      <div class="tab-item">
        orange
      </div>
    </div>


  </body>
</html>

1：2:3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen">
      .tab{
        display: flex;
        width: 100%;
        background: red;
        height: 40px;
        line-height: 40px;

      }
      .tab .tab-item1{
        flex: 1;
        text-align: center;
      }
      .tab .tab-item2{
        flex: 2;
        text-align: center;
      }
      .tab .tab-item3{
        flex: 3;
        text-align: center;
      }
      .tab div:hover{
        background: blue;
      }
    </style>
    <title>d</title>
  </head>
  <body>

    <div class="tab">
      <div class="tab-item1">
        apple
      </div>
      <div class="tab-item2">
        pear
      </div>
      <div class="tab-item3">
        orange
      </div>
    </div>


  </body>
</html>
posted @ 2017-03-30 07:54  judy201654321  阅读(1287)  评论(0)  编辑  收藏  举报