首先。display:flex; 是放在父元素的里面的。而且，这个父元素设置这个属性之后，如果它的尺寸（长和宽）有一个或都不能完全包住子元素，则子元素的尺寸会被压缩。首先就会压缩paddig。
flex有几个属性，我们得记一下。
有个教程对flex有很详细的解释。网址是：http://caibaojian.com/flexbox-guide.html 很不错的。
好了，该干正事了。有个比较重要的（其实都很重要）的属性：flex-wrap
它的作用是当条件触发时，子元素是否换行。
父元素的属性：
(1)display:flex
定义一个flex容器。
需要注意的地方：1，css列（CSS columns）在弹性盒子中不起作用。
2，float，clear与vertical-align在flex项目中不起作用。
(2)flex-direction
设置或检索伸缩盒对象的子元素在父容器中的位置
参数:flex-direction: row | row-reverse | column | column-reverse
row:横向从左到右排列，默认的排列方式。
row-reverse:横向从右向左排列
column:纵向排列 ，从上到下。
column-reverse：从下到上，即最后一项排在最上面。
(3)flex-wrap
设置或解锁伸缩盒的子元素超出父容器时是否换行
参数:flex-wrap: nowrap | wrap | wrap-reverse
nowrap:当子元素溢出父元素时不换行。
wrap:当元素溢出父容器时自动换行。
wrap-reverse:反转wrap排列。
(4)flex-flow
符合属性。包含flex-direction与flex-flow。
flex-flow: <'flex-direction'>||<'flex-wrap'>
(5)justify-content
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性会在对齐上进行控制。
参数:justify-content:flex-start | flex-end | center |space-between | space-around
flex-start:弹性盒的子元素向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end:弹性盒的子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center:弹性盒的子元素将向中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同于最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出。）
space-between；弹性盒的子元素会平均低分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。其他情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距赌气，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around:弹性盒的子元素会平均低分布在行里，两端保留子元素与子元素之间的间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则改制等效于‘center’。在其他情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
(6)align-items
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
参数:align-items:flex-start | flex-end | center | baseline | stretch
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
(7)align-content
设置或检索弹性盒堆叠伸缩行的对齐方式。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
space-between：各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
子元素的属性:
(1)order
参数：order:数字
eg：order:1;
用正数来定义排列顺序，数值小的排在前面。可以为负数。
(2)flex-grow
设置或检索弹性盒的扩展比率。
根据弹性盒子的元素所设置的扩张因子作为比率来分配剩余空间。
参数:flex-grow:数字;
用数值来定义扩展比率，不允许负值。
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
(3)flex-shrink
设置或检索弹性盒的收缩比率
根据弹性盒的子元素所设置的收缩因子作为比率来收缩空间。
参数:flex-shrink:数字;
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有的因子相加之后计算比率来进行空间收缩。(这与flex-grow不同)。
(4)flex-basis
设置或检索弹性盒伸缩基准值。
参数:flex-basis:长度 | auto ;
auto:无特定宽度值，取决于其他属性值。
长度:用长度值来定义宽度，不允许负值。
百分比:百分比来定义宽度，不允许负值。
(5)flex
复合属性。设置或检索伸缩盒对象的子元素如何进分配空间。
如果缩写flex:1,则其计算值为: 1 1 0;
参数: flex: none | [flex-grow] || [flex-shrink] || [flex-basis]
none:none关键字的计算值为：0 0 auto。
flex-grow:定义弹性盒的子元素的扩展比率。
flex-shrink:定义弹性盒的子元素的收缩比率。
flex-basis:定义弹性盒的的子元素的默认基准值。
(6)align-self
设置或检索弹性盒子元素的自身在侧轴方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒的子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒的子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒的子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒的子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒的子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。