很早在筆記本里記下的筆記，分享出來

容器屬性

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;