stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
a
b
c
align-content
(适用于父类容器元素)
设置或检索弹性盒堆叠伸缩行的对齐方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content:flex-start;
a
b
c
d
e
f
align-content:flex-end;
a
b
c
d
e
f
align-content:center;
a
b
c
d
e
f
align-content:space-between;
a
b
c
d
e
f
align-content:space-around;
a
b
c
d
e
f
align-content:strecth;
a
b
c
d
e
f
flex-grow
(适用于子元素)
设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow，可以看到总共将剩余空间分成了4份，其中b占1份，c占3分，即1:3
flex-grow: (default 0)
a
b
flex-grow:1
c
flex-grow:2
d
e
flex-shrink
(适用于子元素)
设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
flex-shrink: (default 1)
flex-basis
(适用于子元素)
设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
flex-basis: (可百分比表示) | auto (default auto)
a
b
c
flex-basis:600px;
d
e
flex(复合属性)
(适用于子元素)
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
以上这篇CSS3弹性盒模型flex box快速入门心得(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
原文地址：http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522660.html
