display
w3.org/TR/css-flexbox-1/#flex-containers一个flex父容器元素能给它的子元素建立一种新型的flex内容布局。这种布局其实是和将元素设定为display:block是很相似的，只是在flex布局里block换成了flex。在flex布局里没有float特征，flex父容器的margin不会和其子元素的margin有重叠效果。Flex父容器元素所形成的block容器特性跟普通的block容器元素所表现的特征完全一样。overflow特征也适用于Flex父容器元素。
Flex父容器元素并不等同于普通的block元素，有一些block元素具有的属性在flex父元素上并不适用。特别的：
如果一个元素被指定为display:inline-flex，那么，在某些情况下，它的display属性会按做flex来计算： 在CSS 2.1 Section 9.7的表格里将会增加有一行，在 'Specified Value' 列里多出inline-flex行和在 'Computed Value' 列里多出flex行
适用元素: 所有元素.
- flex
- 指定此元素为block级别的flex布局的父元素/Flex容器元素。
- inline-flex
- 指定此元素为inline级别的flex布局的父元素/Flex容器元素。
flex-direction
w3.org/TR/css-flexbox-1/#flex-direction-propertyflex-direction属性指明flex子元素在flex父容器内的布局方向，也就是是flex父容器的排列方向。flex子元素的布局方向就根据这个值。
注意：这里的反向(reverse)值并不是指排序的反向，跟writing-mode和direction一样，它是指将布局排列方向反向。元素的渲染顺序，语音输出顺序，导航顺序都不受影响。
适用元素: Flex父容器元素.
初始值: row.
- row
- flex布局的排列方向跟当前writing mode下inline axis方向相同。它们的main-start 和 main-end 端等同于当前writing mode下的inline-start 和 inline-end 端。
- row-reverse
- 类似 row 值，只是它们的main-start 和 main-end 端互换，也就是反向。
- column
- flex布局的排列方向跟当前writing mode下block axis方向相同。它们的main-start 和 main-end 端等同于当前writing mode下的block-start 和 block-end 端。
- column-reverse
- 类似 column 值，只是它们的main-start 和 main-end 端互换，也就是反向。
flex-wrap
w3.org/TR/css-flexbox-1/#flex-wrap-propertyflex-wrap属性控制着flex容器是单行还是多行，还有它的 cross-axis 换行方向，也就是新行的布局方向。
对于非 wrap-reverse 的值，cross-start端等同于当前writing mode下的inline-start 或 block-start端。也就是cross axis换行方向的起始端。而cross-end端是cross-start端的反向端。当flex-wrap值为wrap-reverse时，cross-start 和 cross-end端互换。
适用元素: Flex父容器元素.
初始值: nowrap.
- nowrap
- flex容器是单行显示子元素。
- wrap
- flex容器是多行显示子元素，也就是可以换行。
- wrap-reverse
- 跟wrap值类似，只是换行方向反过来。
flex-flow
w3.org/TR/css-flexbox-1/#flex-flow-propertyflex-flow属性是flex-direction属性和flex-wrap属性的组合体简写，用来控制flex容器的排列方向和换行方向。
适用元素: Flex父容器元素.
初始值: row nowrap.
order
https://www.w3.org/TR/css-flexbox-1/#order-propertyorder属性可以控制某个flex子元素在flex容器中出现的位置顺序，通过给它一个相关的值。 order属性的值是 一个<数字>，指明flex子元素的排列顺序如何变更。
flex容器排列拥有指定顺序的flex子元素时，这个值小的排在前面，值大的靠后排。值相同的按原始顺序排。零值等同于原顺序。这个值会影响渲染输出顺序，效果跟重新修改源代码后显示的效果相同。
这个属性对非flex子元素无效果，除非将来规范做出修改。
适用元素: flex子元素.
初始值: 0.
justify-content
w3.org/TR/css-flexbox-1/#justify-content-propertyjustify-content属性用来设定flex容器内子元素沿当前排列方向的对齐方式。这种对齐是在所有可以自由伸缩的长度和所有auto margins距离确定后完成的。通常，这个属性是用来分配所有flex子元素在一行排列上的剩余空间，或者是虽然没有剩余空间但元素宽宽度可以自由伸缩的情况。它也可以用来控制当子元素长度溢出时的对齐问题。
适用元素: Flex父容器元素.
初始值: flex-start.
- flex-start
- Flex子元素向行首对齐。第一个子元素的起始边跟行的起始边对齐，之后的子元素的起始边跟前一个的末边对齐，依次类推。
- flex-end
- Flex子元素向行的末端对齐。flex子元素的最后一个元素的末边和行的末端对齐，倒数第二个子元素的末边和倒数第一个的始边对齐，依次类推。
- center
- Flex子元素向行中间对齐。flex子元素相互靠拢，然后整体向行的中间对齐。行首和行末的剩余空间是相等的。如果子元素总长度超出容器宽度，那两边溢出的宽度的相同的。
- space-between
- Flex子元素平均分布在行上。如果子元素总长度溢出或只有一个子元素，那它的效果等同于flex-start的效果。否则，第一个子元素的起始边和行的起始边对齐，最后一个子元素的终边和行的末边对齐，剩余其它元素都等距离分布在剩余空间里。
- space-around
- Flex子元素平均分布在行上，但行首和行末留有1/2的其它子元素之间的空间。如果子元素总长度溢出，或只有一个子元素，那么时的效果等同于center效果。否则，子元素平均分布在行上，它们之间的空间距离是相同的。而且行后和行末也空间，但空间的宽度只有子元素之间的宽度的一半。
align-items
w3.org/TR/css-flexbox-1/#propdef-align-items这个属性用来调整Flex子元素在列方向上的对齐方式，它跟justify-content的作用非常相似，只是一个作用于行方向上的对齐，一个作用于列方向上的对齐。align-items用于设定flex容器里所以子元素的缺省列对齐方式，包括匿名的flex子元素。而使用下面要讲的align-self属性可以覆盖父容器指定的align-items属性。(对于匿名flex子元素，它的align-self和父元素指定的align-items值相同。)
如果flex子元素的列方向上的margin有值，则无效。
对于绝对定位的元素，auto值表明是自动计算。其它情况下，auto值align-self等同于父元素指定的align-items值，如果没有父元素，则设置为stretch。
适用元素: Flex父容器元素.
初始值: stretch.
- flex-start
- flex子元素向列首靠拢对齐。
- flex-end
- flex子元素向列尾靠拢对齐。
- center
- flex子元素向列中靠拢对齐。如果子元素在列方向上的高度溢出，则上下溢出的长度相同。
- baseline
- If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.
Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
- stretch
- 如果子元素列方向上的高度值为auto，并且列方向上没有设定margin值，则子元素会拉伸。拉伸的高度是最大化的和列的高度相同。但同时还会受min-height/min-width/max-height/max-width的约束。
注意: 如果flex容器的高度小于这些约束高度，则子元素会溢出。
溢出时，列首边和子元素起始边对齐，另外一端溢出。
align-self
w3.org/TR/css-flexbox-1/#propdef-align-self此属性和justify-content的作用很相似，不同的是，justify-content是让元素在行方向上对齐，而这个属性是在列方向上对齐。另外align-items属性是作用在flex父元素上，设定容器内所有子元素的缺省列对齐方式，而此属性是作用在单个子元素上，设定指定子元素的列对齐方式。(对于匿名的flex子元素，align-self和align-items的效果是一样的)
如果flex子元素的列方向上的margin有值，则无效。
对于绝对定位的元素，值为auto时，系统自动计算效果。其它情况下，如果align-self值为auto，效果根据父元素的align-self而定，如果没有父元素，则设置为stretch
适用元素: flex子元素.
初始值: auto.
- flex-start
- 向列首对齐
- flex-end
- 向列尾对齐
- center
- 向列中对齐(如果子元素高度溢出，则列两端溢出高度相同。)
- baseline
- If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.
Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
- stretch
- 如果flex子元素的高度设置等同于 auto，且列方向上的margin值不少 auto， 则flex子元素拉伸。拉伸的高度是尽可能的达到容器的最大高度，但同时仍受min-height/min-width/max-height/max-width的限制。
注意：上面的这些约束的高度如果是超出了容器的高度，这子元素会溢出。
溢出时子元素跟列首对齐，末端溢出。
align-content
w3.org/TR/css-flexbox-1/#align-content-propertyalign-content属性的作用是在flex子元素是多行时，而且容器内还有剩余空间时，设定子元素的对齐方式，跟justify-content相似。注意：这个属性对单行子元素无效果。属性值的含义是：
注意: 只有容器内是多行子元素时，且列方向上有剩余空间时有效，因为如果是单行，子元素的高度会自动拉伸填满剩余高度。
适用元素: flex父容器.
初始值: stretch.
- flex-start
- 子元素向列首对齐，子元素各行紧挨着前一行向列首对齐。
- flex-end
- 子元素向列尾对齐，子元素各行紧挨着后一行向列尾对齐。
- center
- 子元素各行向列中对齐。各行之间不留空间。而列首和列尾剩余的空间是相同高度。如果子元素高度溢出，在列首和列尾溢出的高度相同。
- space-between
- 子元素各行平均分布在列高度上。并且列首和列尾不留空间，各子元素之间的空间距离相等。
- space-around
- 子元素各行平均分布在列高度上，各列之间的距离相等，并且列首和列尾也有空间，空间的高度是各列之间的距离的一半。如果子元素的高度溢出，则此属性的效果等同于center。
- stretch
- 各列等高度的拉伸，填满整个列高度。如果子元素高度溢出，在此属性效果等同于flex-start
flex-grow
w3.org/TR/css-flexbox-1/#flex-grow-propertyflex-grow属性用来设定felx子元素的扩展因子，值的类型是<数字>。负值无效。
适用元素: flex子元素.
初始值: 0.
flex-shrink
w3.org/TR/css-flexbox-1/#flex-shrink-propertyflex-shrink属性用来设定flex子元素的收缩因子，值的类型是 <数字>。负值无效。
适用元素: flex子元素.
初始值: 1.
flex-basis
w3.org/TR/css-flexbox-1/#flex-basis-propertyflex-basis属性用来设定flex子元素的伸缩度，它能接受的值和width 和 height属性能接受的值一样，而且还可以设置成content。
如果这个属性的值不是指定成auto 或 content, flex-basis属性的作用在横向上和width属性的作用是一样的。如果值设定为auto，则效果等同于content值。例如，对于百分比的值来说，它的大小决定于容器的大小。如果容器的大小不确定，则等效于 content 值。反而推之，flex-basis可以决定容器的宽度，除非有 box-sizing 等属性的设定。
适用元素: flex items.
初始值: auto.