display：flex用法

flex属性：

display:flex      flex-direction: row | row-reverse | column | column-reverse;      

flex-wrap: nowrap | wrap | wrap-reverse;     justify-content: flex-start | flex-end | center | space-between | space-around;

基本代码:

<template>
 <div class="totalStyle">

   <div class="firstStyle">
     <div class="divStyle color1" >
     </div>
     <div class="divStyle color2" >
     </div>
     <div class="divStyle color3" >
     </div>
   </div>
 </div>
</template>

<style scoped lang="scss">
  .totalStyle{
    height:100%;
    width:100%;
  }

  .firstStyle{
    width:100%;
    height:300px;
    background-color: #DDA0DD;
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .color1{
background-color: #AFEEEE;
  }

  .color2{
    background-color: #0000FF;
  }
  .color3{
    background-color: #BA55D3;
  }
  .divStyle1{
    width:200px;
    height: 200px;
  }
  .divStyle2{
    width:200px;
    height: 100px;
  }
  .divStyle3{
    width:200px;
    height: 50px;
  }
</style>

项目排列顺序：

1 flex：row；

父级模块中，子级项目按从左到右顺序排列；

2 flex：row-reverse；

父级模块中，子级项目按从右到左顺序排列；

3 flex：column；

父级模块中，子级项目按从上到下顺序排列；

4 flex：column-reverse；

父级模块中，子级项目按从下到上顺序排列；

 

项目排列方式：

1justify-content: center;

父级模块中，所有子级项目水平居中排列；

2 justify-content: flex-start;

父级模块中，所有子级项目左对齐；

2 justify-content: flex-end;

父级模块中，所有子级项目右对齐；

3 justify-content: space-between;

父级模块中，所有子级项目顺序排列，间隔相等；

4 justify-content: space-around;

父级模块中，所有子级项目两侧间隔相等；

项目排列是否huan'hang

1flex-wrap: nowrap;

不换行，会缩小项目宽度，来占据页面;

2flex-wrap: wrap;

换行显示，超过父级模块的也会显示

2flex-wrap: wrap-reverse;

换行显示，第一行在最下面