很早在笔记本里记下的笔记，分享出来
容器属性
display: flex || inlineflex
flex-direction: row || row-reverse || column || column-reverse
flex-wrap: nowrap || wrap || wrap-reverse
flex-flow: flex-direction | flex-wrap
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | stretch | baseline
align-content: flex-start | flex-end | center | stretch | space-around | space-between //多根轴线的对齐方式
项目属性
order: n //数值越小，排列越靠前
flex-grow: n // 项目放大比例 ，默认为0，即不放大
flex-shrink: n // 项目缩放比例， 默认为1，即2空间不足将缩小， 若为1 则不缩小
flex-basis: length | auto
flex: flex-grow | flex-shrink | flex-basis 默认两个快捷键 auto(1 1 auto) none(0 0 auto)
align-self: auto | flex-start | flex-end | center | baseline | stretch
Flex Example
/* 0 0 auto */
flex: none;
/* One value, unitless number: flex-grow (flex-basis changes to 0) */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink (flex-basis changes to 0) */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
