弹性盒子详解

弹性盒子详解：
一.display:flex :
flex意思是弹性布局，在父元素设置弹性布局之后，子元素的float,clear,vertical-align属性都将失效
二.：
1. flex-direction：元素在主轴之上（水平方向的对齐方式）
flex-direction:row(元素在水平方向上上从左到右进行排列，默认是此种方式)

flex-direction:row-reverse(元素在水平方向上从左到右进行排列，与row是相反的)

flex-direction:column(元素在垂直方向上从上到下进行排列)
flex-direction:column-reverse(元素在垂直方向上从下到上进行垂直排列,与column是相反的)
2.flex-wrap：自动换行会根据你盒子内的元素数量进行换行处理
flex-wrap:nowrap(元素不进行换行)

flex-wrap:wrap(元素进行换行，与nowrap是相对应的)

3. justify-content：元素在主轴之上的排例
justify-content: space-around（每个元素两侧的间隔相等，两边元素与边框之间的间隔比元素之间的间隔大上一倍）

justify-content: center(所有的元素紧挨，居中排列)

justify-content:flex-end(右对齐)

justify-content:flex-start(左对齐)

justify-content:space-between(元素之间的间隔等距，两侧元素与边距之间不留空白)

4.align-items:元素在主轴（横轴，水平方向）上的对齐方式
align-items:flex-end(元素的上边沿与侧轴上侧叠在一起)

align-items:flex-start(元素的下边沿与侧轴下侧叠在一起)

align-items:center(元素的两侧与上下边框之间的距离相等)

5.align-content 元素垂直排例
align-content:center(盒子内的元素在垂直方向上进行居中排例)

align-content:flex-start(元素从边框上边沿开始向上进行叠加)

align-content:flex-end（元素从边框下边沿开始向下进行叠加）

align-content:space-around（元素之间的间隔相等，是上下两边元素与边距的两倍）

align-content:space-btween（元素之间的间隔是相等的，元素与上下边距之间不存在间距）

align-content:stretch(默认值 盒子内的元素会自动堆满垂直方向上的空白处）