1、flex布局与传统布局的区别

传统布局：

兼容性好但是布局繁琐
局限性，不能再移动端很好的布局

flex布局：

操作方便，布局简单，移动端应用广泛
但是IE11或更低版本不支持flex布局

使用范围：
1、如果是PC端页面布局，建议使用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局

2、flex布局原理

flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

flex布局注意事项

当我们为父盒子设为flex布局后，子元素的float、clear、和vertical-align属性都将会失效
伸缩布局 = 弹性布局 = flex布局

3、flex布局父项常见属性（设置在父元素上的属性）

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素的排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式(多行)
align-items：设置侧轴上的子元素排列方式(单行)
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.1、flex-direction(设置主轴的方向)

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

设置侧轴排列

          .container {
                display: flex;
                width: 1200px;
                height: 600px;
                margin: 0 auto;             
                background-color:cornsilk;
                /*设置为侧轴排列*/
                flex-direction: column;
            }
            .container span {
                width: 200px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background-color: cornflowerblue;
            }

        <div class="container">
            <span>东</span>
            <span>南</span>
            <span>西</span>
            <span>北</span>
        </div>

3.2、justify-content(设置主轴上的子元素的排列方式)

justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.

属性值	说明
flex-start	默认值，从头部开始，如果主轴是X轴，则从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是X轴则水平居中)
space-around	平分父级空间排列
space-between	先两边贴边，再去平分剩下的空间排列

          .flexStart {
                display: flex;
                width: 300px;
                height:80px;
                margin: 0 auto;             
                background-color:cornsilk;
                /*设置子元素排列方式*/
                justify-content: flex-start;
                /*设置为侧轴排列*/
                flex-direction: row;
            }
            .flexStart span {
                width: 50px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

         <div class="flexStart">
            <span>东</span>
            <span>南</span>
            <span>西</span>
            <span>北</span>
          </div>

3.3、flex-wrap(设置子元素是否换行)

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

属性值	说明
nowrap	默认值，不换行
wrap	换行

           .wrapBefore {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*设置元素是否换行*/
                flex-wrap: nowrap;
                /*设置子元素排列方式*/
                justify-content: space-between;
                /*设置为侧轴排列*/
                flex-direction: row;
            }
            .wrapAfter {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*设置元素是否换行*/
                flex-wrap: wrap;
                /*设置子元素排列方式*/
                justify-content: space-between;
                /*设置为侧轴排列*/
                flex-direction: row;
            }
            
            .wrapBefore span, .wrapAfter span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

            <h3>换行前</h3>
            <div class="wrapBefore">
                <span>东</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
                <span>多的</span>
            </div>
            <h3>换行后</h3>
            <div class="wrapAfter">
                <span>东</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
                <span>多的</span>
            </div>

3.4、 align-items(设置侧轴上的子元素排列方式(单行))

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

            .flexstart {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*设置子元素侧轴对齐方式*/
                align-items: flex-start;
                /*设置元素是否换行*/
                flex-wrap: nowrap;
                /*设置子元素排列方式*/
                justify-content: space-between;
                /*设置为侧轴排列*/
                flex-direction: row;
            }

            .flexstart span, .flexEnd span, .center span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }
            .stretch span {
                width: 70px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

           <div class="flexstart">
                <span>东</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
            </div>

这里有个特别需要注意的点：在使用拉伸的时候，千万不能给子元素设置高度，否则它是无法进行拉伸的。

3.5、 align-content(设置侧轴上的子元素排列方式(多行))

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子元素在侧轴上平分侧轴空间
space-between	子元素在侧轴上先分布在两头，再去平分剩余空间
stretch	设置子元素高度平分父级元素的高度

          .flexstart {
                display: flex;
                width: 300px;
                height: 200px;
                margin: 0 auto;
                background-color: cornsilk;
                /*设置子元素侧轴对齐方式*/
                align-content: flex-start;
                /*设置元素是否换行*/
                flex-wrap: wrap;
                /*设置子元素排列方式*/
                justify-content: space-between;
                /*设置为侧轴排列*/
                flex-direction: row;
            }

          .flexstart span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-top: 1px;
                margin-right: 1px;
                background-color: blueviolet;
            }

3.6、 flex-flow(设置主轴方向以及设置是否换行，一种复合写法)

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow:row  wrap; //主轴为x轴，并且换行

4、flex布局子项常见属性（设置在子元素上的属性）

flex布局中子元素也存在着相对应的一些属性

4.1、flex(子元素占的份数)

flex属性定义子元素分配剩余空间，用flex来表示占的多少份，默认为0
针对这个，可以先了解有名的CSS布局圣杯布局以及双飞翼布局,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

          .demo {
                display: flex;
                width: 60%;
                height: 200px;
                /*margin: 0 auto;*/
                border: 1px solid darkblue;
                background-color: azure;
            }
            
            .demo div:nth-child(1){
                width: 100px;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: chocolate;
            }
            .demo div:nth-child(3){
                width: 100px;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: chocolate;
            }
            .demo div:nth-child(2){
                flex: 1;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: blueviolet;
            }

       <div class="demo">
            <div>左侧</div>
            <div>中间</div>
            <div>右侧</div>
        </div>

4.2、align-self(控制子元素自己在侧轴上的排列方式)

align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。

           .demo {
                display: flex;
                width: 60%;
                height: 200px;
                margin: 0 auto;
                /*水平居中*/
                justify-content: center;
                /*垂直居中*/
                align-items: center;
                background-color:bisque;
            }
            
            .demo div {
                width: 15%;
                height: 80px;
                text-align: center;
                line-height: 80px;
                background-color: blueviolet;
            }
            
            .demo div:nth-child(2){
                /*让第二个子元素flex-end排列*/
                align-self: flex-end;
                
            }

4.3、order(控制子元素的排列顺序)

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

            .demo {
                display: flex;
                width: 60%;
                height: 200px;
                margin: 0 auto;
                /*水平居中*/
                justify-content: center;
                /*垂直居中*/
                align-items: center;
                background-color:bisque;
            }
            
            .demo div {
                width: 15%;
                height: 80px;
                text-align: center;
                line-height: 80px;
                order: 2;
                background-color: blueviolet;
            }                   
            
            .demo div:nth-child(2){
                /*让第二个子元素flex-end排列*/
                align-self: flex-end;
                /*将第二个放前面去,order设置小即可*/
                order: 1;
            }

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。