flex布局总结

flex布局总结：

移动端flex布局：

1.如果项目多行显示，给容器加属性flex-wrap：wrap；

项目默认都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 flex-wrap: nowrap （默认值，一行显示）| wrap（换行，第一行在上方） | wrap-reverse（换行，第一行在上方。）;

代码示例：

<div class="capability">
  <div class="items items1">
    123hhh
  </div>
  <div class="items items2">
    223hhh
  </div>
  <div class="items items3">
    323hhhh
  </div>
  <div class="items items4">
    423hh
  </div>
  <div class="items items1">
    1
  </div>
  <div class="items items2">
    2
  </div>
  <div class="items items3">
    3
  </div>
  <div class="items items4">
    4
  </div>
</div>

flex样式css：

 .capability{
    display:flex;
    padding:30px 20px 0px;
    flex-wrap: wrap;
  }
  .items{
    width:calc(100%/4 - 18px);
    // padding-left:100px;
    border:1px solid red;
    margin-left:24px;
    box-sizing:border-box;
  }
   .items1{
     padding-left:0px;
     margin-left:0px;
   }

使用float方法

   .capability{
    padding:30px 20px 0px;
  }
  .items{
    width:calc(100%/4 - 18px);
    // padding-left:100px;
    border:1px solid red;
    margin-left:24px;
    box-sizing:border-box;
    float:left;
  }
   .items1{
     padding-left:0px;
     margin-left:0px;
   }

2.如果项目一行显示，且不缩小，超出后滚动，给项目加上flex-shrink：0；

<div class="box">
  <div class="container">
    <div class="con-items">
      <div>
        12
      </div>
    </div>
    <div class="con-items">
      <div>
        23hhhhhhhhd
      </div>
      2123hhhhhhh
    </div>
    <div class="con-items">
      3123hhhhhhhhdjajh
    </div>
    <div class="con-items">
      4123hhhhhhhhdjajh
    </div>
    <div class="con-items">
      5123hhhhhhhhdjajh
    </div>
    <div class="con-items">
      6123hhhhhhhhdjajh
    </div>
    <div class="con-items">
      7123hhhhhhhhdjajh
    </div>
    <div class="con-items">
      8123hhhhhhhhdjajh
    </div>
  </div>
</div>

  .box{
      width:100%;
      overflow:auto;
     }
     .container{
        // width:200vw;
      display:flex;
   }
   .con-items{
    //  width:25vw;
     width:25%;
     height:200px;
     border:1px solid red;
     padding:20px 30px;
    word-wrap:break-word;
    flex-shrink: 0;
   }

还有一种不使用flex使用float：left布局

    .box{
        width:100%;
        overflow:auto;
    }
    .container{
        width:200vw;
    }
   .con-items{
     width:25vw;
    // width:25%;
     height:200px;
     border:1px solid red;
     padding:20px 30px;
    word-wrap:break-word;
    float：left；
   }

3如果一行显示多个项目且不超出容器（比如三个项目）

 <div class="line">
  <div class="item item1">
    123hhh
  </div>
  <div class="item item2">
    223hhh
  </div>
  <div class="item item3">
    323hhhh
  </div>
</div>

flex方法

  .line{
    display:flex;
    padding:30px 20px 0px;
  }
  .item{
    flex:1;（项目平分剩余空间）
    // padding-left:100px;
    border:1px solid red;
    margin-left:24px;
    box-sizing:border-box;
  }
  .item1{
    margin-left:0px;
  }
  .item2{
    margin-left:100px;
  }

float方法

 .line{
    padding:30px 20px 0px;
  }
  .item{
     width:calc(100%/3 - 44px);
    // padding-left:100px;
    border:1px solid red;
    margin-left:24px;
    box-sizing:border-box;
    float:left;
  }
  .item1{
    margin-left:0px;
  }
  .item2{
    margin-left:100px;
  }

自己总结的 全是手敲，希望对大家有用。如有问题欢迎指正。