css3弹性盒子模型

弹性盒子模型

display:flex；

是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

轴：

主轴x轴 方向：从左到右
纵轴/侧轴y轴 方向：从上到下

弹性容器：
一个包含于子元素的容器设置了display:flex，那么这个容器也就变成了弹性容器

属性：

flex-direction:
弹性容器中子元素的排列方式(主轴排列方式)

属性値：
row
默认一行
row-reverse
反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column
纵向排列
column-reverse
反转纵向排列

flex-wrap:
设置弹性盒子的子元素超出父容器时是否换行

属性値：
wrap
换行
nowrap
不换行
wrap-reverse
反方向换行

flex-flow:
flex-direction 和 flex-wrap 的简写
写法：flex-flow:row-reverse wrap

align-item:
设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式

属性値：
flex-start
center
flex-end
baseline
基线

align-content:
修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式)

属性値：
flex-start
center
flex-end
space-between
两端对齐，中间自动分配
space-around
自动分配距离

justify-content:
设置弹性盒子元素在主轴（横轴）方向上的对齐方式

属性値：
flex-start
center
flex-end
space-between
两端对齐，中间自动分配
space-around
自动分配距离

弹性子元素：
注：单指子元素，子元素以下的层级不是弹性子元素

align-self
单独的子元素对齐方式

order
排序，数字越大越往后排，默认为0，支持负数

flex-grow:
设置或检索弹性盒子元素的扩展比率

flex-shrink:
指定了 flex 元素的收缩规则。
注：flex 元素仅在默认宽度之和大于容器的时候才会发生 收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis:
用于设置或检索弹性盒伸缩基准值。（替换width，权重比width高）