这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天

弹性盒子基础

display：flex意思是弹性布局，在父元素设置弹性布局之后，子元素的float,clear,vertical-align属性都将失效

flex-direction：元素在主轴之上（水平方向的对齐方式）

flex-direction:row(元素在水平方向上从左到右进行排列，默认是此种方式) flex-direction:row-reverse(元素在水平方向上从右到左进行排列，与row是相反的) flex-direction:column(元素在垂直方向从上到下进行排列) flex-direction:column-reverse(元素在垂直方向上从下到上进行垂直排列,与column是相反的)

flex-wrap：自动换行会根据你盒子内的元素数量进行换行处理

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

justify-content：元素在主轴之上的排列

justify-content: space-around（每个元素两侧的间隔相等，两边元素与边框之间的间隔比元素之间的间隔大上一倍）

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

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

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

align-items:元素上边沿，下边沿对齐方式的对齐方式

align-items:flex-end(元素的上边沿与侧轴下侧叠在一起) align-items:flex-start(元素的下边沿与侧轴下侧叠在一起) align-items:center(元素的两侧与上下边框之间的距离相等)

align-content 元素垂直排列排列排列

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

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

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

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

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

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