弹性布局：display:flex相关知识点与常见应用场景

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/88064331

小游戏：http://flexboxfroggy.com/ 通过这个游戏可对弹性布局的属性进行了解透彻。

  flex容器的基本概念
flex-direction：设置主轴方向，row,row-reverse,cloumn,column-reverse
flex-wrap：是否换行，nowrap,wrap,wrap-reverse
flex-flow：flex-direction flex-wrap
justify-content：主轴方向的对齐方式，flex-start,flex-end,center,space-between,space-around
align-items：交叉轴的对齐方式,flex-start,flex-end,center,baseline,stretch
align-content：设置多根轴线的对齐方式，换行后就有两条轴线，flex-start,flex-end,center,space-between,space-around, stretch

 项目的属性
order：0,排列顺序，数值越小越靠前，默认为0
flex-grow：0，项目的放大比例，默认为0不放大
flex-shrink：1，项目的缩小比例，默认为1不缩小
flex-basis：auto，用于设置或检索弹性盒伸缩基准值，在分配多余空间之前，项目占据的主轴空间（main size）
flex：flex-grow flex-shrink flex-basis
align-self：auto;默认为父元素align-items设置的值，如果没有父元素，等同于stretch。auto,flex-start,flex-end,center,baseline,stretch

常见应用场景【简单】： 

<div class="container">
  <div class="flex-item">1</div>
  <div class="flex-item flex-item2">2</div>
  <div class="flex-item">3</div>
</div>

1、一行显示

.container{
      display: flex;
    }

2、子元素在父元素中上下、左右居中显示

.container{
      display: flex;
      justify-content: center;//左右居中
      align-items: center;//上下居中
    }

3、子元素平均分配父元素的空间

.flex-item{
      border:1px solid pink;
      flex:1;
    }

4、左右各自占据25%，中间占据50%

.flex-item{
      border:1px solid pink;
      flex:1;
    }
    .flex-item2{
      flex:2
    }

5、移动第二个子元素到最前面显示[如图]

.flex-item{
      border:1px solid pink;
      order:2
    }
    .flex-item2{
      order:1;
    }

常见应用场景【复杂】： 

1、子元素默认占据父元素的剩余空间