今天用到弹性布局的时候，不小心忽略了弹性布局分为容器属性和项目属性
就比如我想让三个class=box的div在一行显示，我写了如下代码
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: blue;
display: flex;
}
然而display：flex是应该设置给div父元素的属性，也就是容器的属性，应该这样写
body{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: blue;
}
发现对弹性布局掌握并不熟练，于是来做个总结
文章目录
·基本概念
在弹性布局中，有两根轴线：
水平方向的主轴
垂直方向的交叉轴
Flex布局分项目与容器。 容器指的就是弹性盒本身（即父元素），项目指的是内部的子元素。
·容器属性
容器属性指的是放在容器选择器样式列表中的属性
display:flex;
拥有该属性的元素就是容器。
当该元素拥有该属性时，子元素的float、vertical等属性都将失效。子元素就是项目。所有的项目按照主轴的方向排列成一排。
flex-direction
该属性决定主轴的方向: 默认是row
可选值有： row、 column、 row-reverse、 column-reverse
row：默认值，水平从左到右排列
row-reverse: 水平从右到左排列
column：垂直 从上到下排列
column-reverse：垂直 从下到上排列
flex-wrap
该属性用于决定容器内的项目是否换行，以及如何换行
可选值： nowrap、wrap、wrap-reverse
nowrap 不换行
wrap 换行 往下排列
wrap-reverse 换行 往上排列
justify-content
该属性决定项目在容器的主轴上的排列方式
可选值：
flex-start (默认值) 靠左
flex-end 靠右
center 居中
space-between 开头的项目与结尾的项目是贴边的 中的空白平分
space-around 每一个项目的左右空白距离相等
space-evenly 每一个空白都相等
align-items
该属性决定项目在容器中的垂直方向的对齐
可选值:
stretch 默认值 上贴顶 下贴底
flex-start 贴顶
flex-end 贴底
center 居中
baseline 文本基线对齐
align-content
当有多根轴线时才会生效，决定多根轴线在容器中的排列方式
可选值：
stretch 默认值 表示填满
flex-start 贴顶
flex-end 贴底
center 居中
space-around 每一个轴线的空白距离相等
space-between 第一根轴线 贴顶 最后一根轴线 贴底 平分空白
space-evenly 每一个空白都相等
·项目属性
flex-grow
该属性决定项目的放大比例。
放大规则： 先计算容器宽度，再计算每一个项目的width、flex-basis、内容宽之和。剩余的部分按照每一个项目的flex-grow之和平分。每一个项目占自己的flex-grow值份。
flex-shrink
该值决定缩小比例
计算规则： 计算容器宽度A，计算所有项目的实际宽度之和B，如果B大于A。此时flex-shrink属性生效。
(B - A) / 所有项目的flex-shrink属性之和 = C。 就是shrink值为1所应当缩小的值。再每一个项目就缩小shrink值*C
flex-basis
该属性决定项目所占宽度，优先于width与内容
优先级: flex-basis > width > 内容宽
flex
该属性是一个融合属性 分别表示 flex-grow flex-shrink flex-basis
flex: 0 1 auto; 后两个属性可以省略
等价于
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order
该属性决定项目在容器中的排列顺序
默认值是1 越小越靠前
align-self
该属性决定项目在容器中的垂直方向的对齐方式，会覆盖父容器的align-items。
可选值：
stretch 默认值 上贴顶 下贴底
flex-start 贴顶
flex-end 贴底
center 居中
baseline 文本基线对齐