1.什么是flex布局?
flex是灵活的意思,见字知意flex布局可使网页更简单、灵活 ,避免浮动脱标的问题
2.flex布局的作用
1.基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
2.任何一个元素都可以直接给宽度和高度一行显示
3.设置方式
给亲父元素添加 display: flex，子元素可以自动的挤压或拉伸
3.组成部分
弹性容器
弹性盒子
主轴(默认X轴)
侧轴
4.主轴对齐方式
修改主轴对齐方式属性: justify-content(设置给亲爸爸)
flex-start :默认值, 起点开始依次排列
flex-end :终点开始依次排列
center :沿主轴居中排列
space-around :弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between :弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly :弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
5.侧轴对齐方式
修改侧轴对齐方式属性:align-items（添加到弹性容器-父级)给单行子盒子
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级)
flex-start起点开始依次排列
flex-end终点开始依次排列
center沿侧轴居中排列
stretch 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器
6.弹性盒子换行
弹性盒子换行显示 : flex-wrap: wrap; (给父元素设置)
默认不换行flex-wrap: nowrap;
7.侧轴多行对齐方式
修改多行侧轴对齐方式属性:align-centent（添加到弹性容器-父级)给多行子行盒子
属性值和主轴差不多
flex-start :默认值, 起点开始依次排列
flex-end :终点开始依次排列
center :沿主轴居中排列
space-around :弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between :弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly :弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
8.改变轴方向
使用flex-direction改变元素排列方向
