CSS 弹性盒子模型

属性	说明	版本
flex	复合属性。设置子元素如何分配空间。	CSS3
flex-grow	设置弹性盒子项的扩展比率。	CSS3
flex-shrink	设置弹性盒子项的收缩比率。	CSS3
flex-basis	设置弹性盒子项伸缩基准值。	CSS3
flex-flow	复合属性。设置弹性盒子项排列方式。	CSS3
flex-direction	设置弹性盒子子项的方向。	CSS3
flex-wrap	设置 flex 容器是单行或者多行。	CSS3
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。	CSS3
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。	CSS3
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。	CSS3
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。	CSS3
order	设置或检索弹性盒模型对象的子元素出现的順序。	CSS3

浏览器支持：

弹性盒子属性只适用于弹性盒子，在非弹性盒子中无效。声明弹性盒子：

div{
   
  display: -webkit-flex; /*低版本 Safari */
  display:flex;
}

弹性盒子属性中用于子项的属性：flex, flex-grow, flex-shrink, flex-basis,order, 其他属性都用于外层包裹元素。当一个元素声明为弹性盒子时，他的子元素默认设置了 flex:0 1 auto 属性。
当元素被声明是弹性盒子时，他的子元素的尺寸和定位属性将会受到影响(不会影响孙辈元素)。

flex

flex 属性用于设置子元素如何分配空间。可以有1-3个值。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
语法：flex: auto|none|flex-grow flex-shrink flex-basis;

值	描述
auto	默认值，与 1 1 auto 相同。
none	与 0 0 auto 相同。
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值：“auto”/数值单位/百分比。

flex:1;
flex:1 1;
flex:1 1 none;
flex:1 1 20px;

flex-grow

flex-grow 属性用于设置弹性盒子子项的扩展比率。

.div1{
   
  flex-grow:2;
  flex-basis:0;