flex使用场景

1.绝对居中：

.box {

    display: flex;

    width: 100%;

    height: 500px;

    background: #cccccc;

    justify-content: center;//主轴居中

    align-items: center; //交叉轴居中

  }

  .box div {

    width: 50px;

    height: 50px;

    background: red;

    border: 2px solid #007aff;

  }

2.图片展示： 图片指定宽度，不指定数量

 .box {

    display: flex;

    width: 100%;

    height: 500px;

    background: #cccccc;

    justify-content: flex-start;

    align-content: flex-start; /*交叉轴方向行间排列*/

    align-items: flex-start;

    flex-wrap: wrap; /*设置换行*/

    padding: 10px;

    box-sizing: border-box;

  }

  .box div {

    width: 50px;

    height: 50px;

    background: red;

    border: 2px solid #007aff;

    margin: 5px; /*间距*/

  }

3.单行左右布局：

.box
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}

.box .div1
{
flex:1;
}

4.三列场景：

.box
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}

.box .div1
{
flex:1;
}