flex properties (MDN的解释）

1. flex-item有关的属性

1.1 flex-shrink

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.

1.2 flex-grow

The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
main size如下图：

flex-desc.png
（其实就是flex-item在主轴上的长度)
The main size is either width or height of the item which is dependant on the flex-direction value.
The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

1.3 flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
flex-basis 优先级比 width 或 height 高。

1.4 order

order越小，对应的项目越靠前。

2. flex-container有关的属性

2.1 flex-flow: row wrap | column nowrap

2.2 justify-content

如果主轴是row, 同一行元素们在主轴方向上的对齐方式

2.3 align-items

如果主轴是row, 同一行元素们在交叉轴方向上的对齐方式

2.4 align-content

如果主轴是row, 多行在交叉轴上的对齐方式
比如：

align-content: space-around
align-content: stretch