PS:如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis :设置或检索弹性盒伸缩基准值 默认值 :auto 适用于 :flex子项
flex-basis 控制元素的默认尺寸，然后再由其他 Flexbox 属性控制，可以覆盖 width 属性
flex-basis 可以和 width 属性互换
PS:flex-basis 是通过主轴 (main axis) 来影响元素尺寸的
align-self:允许单个子元素有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值 :auto 适用于 :flex子项
属性 描述auto 继承父元素的"align-items"值，如果其没有父元素，等同于"stretch"
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 第一行文字的基线对齐
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
父元素: align-items:flex-end
a: align-self: flex-end
b: align-self: center
c: align-self: flex-start
d: align-self: baseline; padding: 20px 10px
e: align-self: baseline
f: align-self: stretch
g: align-self: auto
CSS参考手册
Flex 布局教程-阮一峰
Even more about how Flexbox works — explained in big, colorful, animated gifs
How Flexbox works — explained with big, colorful, animated gifs