css弹性盒子基本属性

弹性盒子是CSS3的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间

操作方便，布局简单，移动端使用广泛

PC端浏览器支持情况较差

IE11或更低版本中，不支持或部分支持

在盒模型中较为灵活

display: flex; 将对象作为弹性伸缩盒显示

display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

flex-direction: row-reverse; 翻转 水平方向 
flex-direction: column; 垂直方向 上方开始 
flex-direction: row; 默认 
flex-direction: column-reverse; 垂直方向 下方开始 

 justify-content: flex-start; 默认 

 justify-content: center; 居中对齐 
justify-content: flex-end;子元素在主轴终点对齐 
 justify-content: space-between; 两端对齐
justify-content: space-around;子元素之前、之后、之间都有间隔 之间是之前和之后的两倍 

 justify-content: space-evenly;四周对齐，弹性于元素平均分布在周围 
align-items: flex-end; 侧轴 终点对齐 

 align-items: flex-start; 侧轴 起点对齐
align-items: center; 侧轴 中间对齐 
align-items: baseline;文字的基线对齐 
align-items: stretch;默认值，没有高度或者高度为auto，将沾满整个容器 
flex-wrap: nowrap;默认，不换行 
flex-wrap: wrap; 换行，第一行在上方 
flex-wrap: wrap-reverse;换行，第一行显示在下方 

flex-wrap:wrap;
align-content: flex-start;起点对齐 没有行间距
align-content: flex-end;终点对齐 没有行间距
align-content: center;居中对齐 
align-content: space-between;两端对齐，中间自动分配