flex 与 float 的差异
//浮动float（这个发明的初衷是文字图片的环绕）：
1、脱离了标准流，没有办法撑开父元素；
//flex布局（这个就是为了页面布局而发明的）：
1、没有脱离标准流，设置元素位移多样化
主轴对齐方式：左到右
1. 变成弹性盒子模型
当父元素设置了弹性盒子模型后，所有的子元素
1. 会强制一行上显示
2. 子元素可以自由的设置宽度和高度
3. 子元素默认宽度 由内容撑开
4. 子元素默认高度和父元素等高（内容侧轴平铺）
//在父元素的css上面设置
display：flex; //变成弹性盒子模型
justify-content:属性值;//对齐方式
属性值：
flex-start //轴线开始的方向排序（主轴：从左到右）
flex-end //轴线结束的方向废墟（主轴：从右到左）
center //居中
space-around //每个盒子分的间隙相等（首尾盒子）
space-between //两端对齐，剩下的盒子平分间隙
space-evenly //让盒子所有间隙相等（平分对齐）
单行侧轴对齐方式：上到下
align-items：属性值； //从上到下对齐方式
属性值：
flex-start //轴线开始的方向排序（侧轴：从上到下）
flex-end //轴线结束的方向废墟（侧轴：从下到上）
center //居中
space-around //每个盒子分的间隙相等（首尾盒子）
space-between //两端对齐，剩下的盒子平分间隙
space-evenly //让盒子所有间隙相等（平分对齐）
伸缩比（子元素设置）
flex：数值；
多少个子元素设置了数值1，则表示多少个子元素均分一个空间
例如：
父盒子包含三个子盒子，前两个子盒子设置flex：1；另一个设置宽高，
则前两个盒子平分除了第三个盒子空间外的其他空间。
父盒子包含三个子盒子，一个子盒子设置flex：1；一个子盒子
设置flex：2；另一个设置宽高，则前两个盒子分除了第三个盒子空间
外的其他空间。第一个占1/3空间，第二个占2/3空间.
主轴方向 （更换轴线方向）
flex-direction:属性值；
属性值：
row（默认值） //轴线方向（主轴：左到右 侧轴：上到下）
row-reverse //轴线方向（主轴：右到左 侧轴：上到下）
column //轴线方向（主轴：上到下 侧轴：左到右）
column-reverse //轴线方向（主轴：下到上 侧轴：左到右）
弹性盒子换行
display：flex； //强制盒子在一行上显示，内容会压缩
//换行显示
flex-wrap：属性值；
属性值：
nowrap //默认值，不换行
wrap //换行显示
wrap-reverse //反向换行显示
多行侧轴对齐方式
flex-wrap: wrap; //align-content必须搭配flex-wrap使用（默认值不行）
align-content:属性值；
属性值：
stretch //拉伸 默认
flex-start //轴线开始的方向排序（侧轴：从上到下）
flex-end //轴线结束的方向废墟（侧轴：从下到上）
center //居中（如果主轴方向不变，则是上下居中）
space-around //每个盒子分的间隙相等（首尾盒子）
space-between //两端对齐，剩下的盒子平分间隙
space-evenly //让盒子所有间隙相等（平分对齐）
例子
.box {
/* 弹性盒子模型 */
display: flex;
/* 更换主轴方向 主轴 从上到下 侧轴 从左到右 */
flex-direction: column;
/* 侧轴 水平居中 */
align-items: center;
/* 主轴 垂直等分间隙 */
justify-content: space-evenly;
width: 150px;
height: 150px;
border: 5px solid #000;
}
扩展属性
1、设置于子元素，只改变子元素的位置
order：数值； //数值有三个：默认值0，负值，正值
负值：子元素向后移动
正值：子元素向前移动
注：多个子元素一起设置，则全部移动到开头/结尾，
align-self:属性值；
属性值：
flex-start //轴线开始的位置
flex-end //轴线结束的位置
center //居中（主轴方向不变，侧轴垂直居中）
