flex布局内容
flex布局
父项：
display:flex 设置普通的盒子变为flex盒子
justify-content设置主轴对齐方式 （默认值： flex-start，x轴）
向左对齐：
justify-content:flex-start
向右对齐:
justify-content: flex-end;
居中对齐：
justify-content: center;
两侧对齐，间隔存放（水平方向）：
justify-content: space-between;
间隔存放，两侧空间小于中间（水平方向）：
justify-content: space-around;
元素周围分配相同的空间（水平方向） ：
justify-content: space-evenly;
align-items设置侧轴对齐方式（单行，y轴，默认值：stretch）
向上对齐：
align-items: flex-start;
向下对齐：
align-items: flex-end;
垂直对齐：
align-items: center;
默认值：stretch
（ 子项未设置高度时，子元素的高度和父元素的高度一样高，若子元素的宽度未设，内容撑开子元素的宽度 ）
align-content 设置侧轴对齐方式（多行，y轴，默认值：stretch）
向上对齐：
align-content:flex-start
向下对齐：
align-content:flex-end
两侧对齐，间隔存放（垂直方向）：
align-content: space-between;
间隔存放，两侧空间小于中间（垂直方向）：
align-content: space-around;
元素周围分配相同的空间（垂直方向） ：
align-content: space-evenly;
默认值stretch：（与align-items的默认值stretch一样）
注意点：align-items属性不能使用align-content属性的值
flex-wrap 换行（默认值：nowrap）
默认状态下弹性布局里的盒子是不换行的。只会压缩子盒子的宽度，即使子盒子的宽度大于父盒子。
不换行：
flex-wrap: nowrap;
换行：
flex-wrap: wrap;
flex-direction 设置主轴方向（默认值：row）
水平方向（常用）：
flex-direction: row;
右到左：
flex-direction: row-reverse;
垂直方向（常用）：
flex-direction: column;
主轴（justify-content）方向为垂直方向时，属性值的效果也会改变，侧轴（align-items / align-content）转变为水平方向，其属性值的效果会改变
下到上：
flex-direction: column-reverse;
子项：
使用 浮动无效
使用 定位 margin 转换 有效
flex属性：设置子项占父项宽度（高度）的比例。
注意：不能和 flex-wrap（换行）一起使用
align-self属性：设置子项自己在侧轴上的对齐方式。
属性值：flex-start flex-end center
当主轴为默认轴（水平方向）时：
- 默认的宽度等于内容撑开
- 默认的高度等于父项的高
- flex:1 设置 子项的宽度
- align-self: 设置 子项在侧轴上的对齐
当主轴为垂直方向时：
- 默认的高度等于内容撑开
- 默认的宽度等于父项的宽度
- flex:1 设置子项的高度
- align-self 设置 子项在侧轴上的对齐（水平）
定位补充：
块级元素用了绝对定位和粘性定位其宽度由内容撑大。
