弹性盒模型（部分布局超好用）

使用弹性盒模型的目的：

1.提供一种更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的。

2.让容器有能力改变项目的宽高，以填满可用的空间。

3.布局与方向无关

属性：display:flex(适用于父级元素)

flex-direction(写在父级css中作用于子级):

检索，子级在盒子中的位置（子级的排列顺序）

值：

row 横向，左到右

   

row-reverse 反横向 ，右到左

  

 

column 纵向，上到下

 

row-reverse 反纵向，下到上

 

flex-wrap(写在父级作用于子级)：

检索，子级是否超出父级（换不换行）

值：

nowrap          不换行

 

wrap          换行

  

 

 

wrap-reverse          反向wrap排列

 

justifl-content(写在父级，作用于子级)：

检索弹性盒子在主轴（x）方向上的对齐方式

值：

flex-start          左对齐

 

flex-end          右对齐

 

center                 居中

 

space-between         两端居左居右中间等间距

 

spance-around        N个盒子个数分布为N个空间，盒子在各空间内居中

 

align-items(写在父级，作用与子级)：

检索盒子在Y轴上的对齐方式

值：

flex-start        顶置

 

flex-end        置底

 

center        居中

 

baseline        与基线对齐

stretch         置顶加置底，高度受到min-height与max-height限制

align-content(写在父级作用于子级)：

检索 换行时对齐方式

值：

flex-start          置顶

flex-end          置底

 

center                 居中

 

space-between         上下置顶置底上下居中

 

space-around        N个盒子个数分布为N个空间，盒子在各空间内居中

 

order(写在子级)：

排列顺序

值（值越小排位越靠前）：阿拉伯数字

flex-grow(写在子级)：

分配剩余空间

值（值越大分配越多）：阿拉伯数字