弹性盒子详解

弹性盒子详解:
一.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(默认值 盒子内的元素会自动堆满垂直方向上的空白处)
弹性盒子详解