flex 布局

1.为什么使用flex布局？

传统的布局基于盒模型，需要使用 float ，display 属性，并且还要精确计算宽度及外边距，会很麻烦；
而 Flex 布局，可以简便、完整、响应式地实现各种页面布局，自动精确控制对齐，无需计算。

1.png
传统布局代码实现以上效果：

 li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;

            /*浮动并需要计算*/
            float: left;        
            margin-right: 192px;
        }

flex布局代码实现以上效果：

ul {
            display: flex;
            justify-content: space-between;
        }

li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
        }

2. 实现 flex 布局的步骤

(1)指定一个盒子为伸缩盒子

.box{
  display: -webkit-flex; /* 兼容Webkit 内核的浏览器 */
  display: flex;
}

(2)设置属性来调整此盒的子元素的布局方式

3. 给伸缩盒子添加的属性

(1) flex-direction属性:决定主轴的方向
(主轴：Flex容器的主轴主要用来配置Flex项目; 侧轴：与主轴垂直的轴称作侧轴)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction属性.png

(2) flex-wrap属性:在一行上排不下全部的项目时，决定换行方式

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap属性.png

(3) flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

(4) justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content属性.png
(5) align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items属性.png
(6) align-content属性堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content属性.png

4. 给子元素添加的属性

(1) order 属性 控制子元素的顺序，数值越小，排列越靠前，默认为0。

.first {
    order: 20;
        }
.second {
    order: 25;
        }
.third {
    order: 21;
        }

order属性.png

(2) flex 属性 控制子元素伸缩比例，分配父元素剩余的空间

.first {
    flex: 1;
    }
.second {
    flex: 2;
        }
.third {
    flex: 1;
    }
.fourth {
    width: 600px;
    }

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

例子：

.box {
    align-items: center;
    }

.box .third {
    align-self: flex-start;
    }

align-self 属性.png