flex布局总结
一：flex布局（父项）
1.flex组成部分 display:flex（设置普通盒子为flex盒子）
flex盒子特点如下：
- a.弹性容器：默认的宽度是父元素的宽度，默认的高度是由内容所撑开
- b.弹性盒子：默认的宽度由内容撑开，默认的高度是父元素的高度；
- c.主轴对齐方式(justify-content)：方向是水平
设置主轴对齐方式：justifi-content
- justify-content:flex-start; 默认值，由父元素的起点开始显示,左对齐
- justify-content:flex-end; 从父元素的终点开始显示，右对齐
- justify-content:center; 弹性盒子在弹性容器中水平居中，居中对齐
- justify-content:space-around; 空白空间围绕在弹性盒子的两侧--首尾弹性盒子离弹性容器的距离，是弹性盒子与弹性盒子之间的距离的1/2，间隔对齐 两侧间隔小于中间（sd）
- justify-content:space-between; 首尾的弹性盒子与弹性容器没有间隙，弹性盒子与 性盒子之间的空间间隙相等先两侧对齐（sb）
- justify-content:space-evenly; 平均空白缝隙，均分在弹性容器与弹性盒子之间，绝对平分（se）
设置侧轴对齐方式（单行）:align-items
- align-items:flex-start ；上对齐
- align-items:center;居中
- align-items:flex-end；下对奇
- stretch； 默认值， 弹性盒子沿着主轴线被拉伸至铺满容器
设置侧轴对齐方式（多行）:align-content
- align-content：flex-start；上对齐
- align-content：center；居中对齐
- align-content: flex-end；下对奇
- align-content：space-between；先两侧对齐
- align-content：space-around；间隔对齐，两侧间隔小于中间
- align-content：space-evenly；绝对平分
设置换行：flex-wrap
- 默认值：nowrap 不换行
- 换行：wrap
注意：换行和flex（值）不能同时使用
设置主轴方向：flex-direction
- 默认值：row 从左到右
- row-reverse 从右到左
- column （常用） 上到下
- column-reverse 下到上
二：flex布局(子项)
设置子项占用父项的宽度（高度）的比例：flex
代码：flex
注意 : 只占用父盒子剩余尺寸
设置子项在侧轴上的对齐方式：align-self
- align-self：flex-start 上对齐
- align-self：center 居中对齐
- align-self：flex-end 下对奇
设置主轴方向：flex-direction：column （常用） 上下为主轴
- 默认的高度等于内容高度
- flex：1；设置子项的高度
- align-self 设置 子项在侧轴上的对齐（水平）
- 默认宽度扽与父项的宽度
