flex布局的一些问题？

1.flex布局实现过什么项目？

no.1两栏布局：左侧固定，右侧自适应

 <div class="box">
  	<div class="left">左边</div>
   	<div class="right">右边</div>
 </div>
 <style>
   .box{
     display: flex;
   }
   .left{
     width: 100px;
   }
   .right{
     flex: 1;
   }
</style>

no.2三列布局

 <div class="wrap">
  	<div class="left">左边</div>
   	<div class="middle">中间</div>
   	<div class="right">右边</div>
 </div>
<style>
    .wrap{
      display: flex;
      justify-content: space-between;
    }
    .left,.middle,.right{
      height: 100px;
    }
    .left{
      width: 100px;
      background-color: coral;
    }
    .middle{
     flex: 1;
      background-color: green;
    }
    .right{
      width: 120px;
      background-color: red;
    }
</style>

2.flex布局作用在父级还是子级？

flex布局的属性虽然分为父级容器和子级容器的属性，但是所有的效果都是作用在子级容器上的，只不过父级容器的属性作用的是子级容器整体或者说所有的子级容器；

3.如何实现flex的水平垂直居中？

<div class="father">
    <div class="son">
    </div>
</div>

.father{
    width: 400px;
    height: 400px;
    border: 1px dashed black;
    display: flex;/*父元素设置flex属性*/
    justify-content: center;/*水平主轴居中*/
    align-items: center;/*垂直交叉轴居中*/
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
}

4.flex的几个属性及其作用？

flex-direction 主轴方向：row｜row-reverse｜column｜column-reverse；
flex-wrap 是否换行：nowrap｜wrap｜wrap-reverse；
flex-flow flex-direction和flex-wrap的简写：row nowrap｜。。。。
justify-content 主轴上的对齐方式：flexs-start｜flex-end｜center｜space-between｜space-around；
align-items 交叉轴对齐：flexs-start｜flex-end｜center｜baseline｜stretch；
align-content 多根轴线对齐：flex-start | flex-end | center | space-between | space-around | stretch；
order 项目排列顺序：数值越小越靠前，默认0；
flex-grow 上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定