弹性盒子

弹性盒子是偶遇弹性容器和弹性子元素组成，弹性容器设置display:flex或者inline-flex,会让容器变成弹性盒子。
父级容器属性:
1.主轴方向flex-direction
-row行 横向排列
-column列 纵向排列
-row-reverse 横向反向
-column-reverse 纵向反向
2.换行flex-wtap
默认flex-wtap:nowrap;
换行flex-wtap:wrap;
1,2合并flex-flow
flex-flow:row wrap;
flex-flow:row-reverse wrap;
3.项目主轴对齐方式justify-content
flex-start默认row靠左 column靠上
center
flex-end row靠右 column靠下
space-between 两端对齐，中间平分
space-around 两边和中间都有空隙，两边空隙是中间的一半
4.项目侧轴对齐方式align-items
flex-stat row靠上 column靠左
center 居中
flex-end row靠下 column靠右
baseline 与flex-start相似，baseline是以文字基线为基准
stretch 高度拉伸至父级
5.交叉轴 align-content
flex-start row靠上 column靠左
center 居中
flex-end row靠下 column靠右
space-between 两端对齐，中间平分
space-around 上下有间距，中间兼具是上下的两倍
stretch
6.

子元素属性：align-self:
flex-start:row时子元素靠上 column时子元素靠左
center 居中
flex-end row时子元素靠下，column时子元素靠右
stretch 子元素height: auto; 高度拉伸之父级
baseline 与flex-start相似，但不同

排序
order：2
order:-1;排到第一位

弹性盒子会脱离文档流
设置弹性盒子后，子元素css中，float，clear，vertical-align这些属性失效

标签：flex,盒子,column,元素,弹性,start,row
来源： https://www.cnblogs.com/MLdetiantian/p/16281149.html