「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」
在CSS2升级到CSS3时新增了Flex布局方式，这种方式也叫弹性布局、伸缩布局。其中相关属性有作用在父级容器上的，也有作用在子级项目上的，需要灵活运用
其中父级容器上的属性有，分别是flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
子级容器上也有6个，分别是flex-grow、flex-shrink、flex-basis、flex、align-self和order
本文主要讲子级容器上的6个
子级容器上的属性，主要控制flex布局中子项的自适应伸缩及分配
自适应伸缩 = 按比例分配容器的剩余空间
flex-grow定义子项（item）的扩展比例
默认值为0，即无扩展
仅当存在可用的分配空间时有效
对于多行的子项，剩余空间以“行”为单位
值为纯数字，没有负值，没有单位
flex-shrink定义子项（item）的收缩比例
值表示的是空间分配比例，纯数字，无单位；
默认值为1，即等比缩小
当容器空间不足时有效（nowrap状态下）
flex-basis定义子项（item）在主轴上的基准尺寸（初始大小）
值为长度值或者百分比
默认值：auto，即项目原定大小；如果设定值，则优先于项目原定大小
配合 flex-grow 和 flex-shrink 配合使用才能发挥效果
flex复合属性：flex-grow, flex-shrink 和 flex-basis的简写
语法
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 多个值以空格隔开，按既定顺序排列（grow、shrink、basis），可省略
值的写法有多种形式
flex的常见取值： 默认值：【flex：0 1 auto】 （三个属性值的组合），简写为【flex：0 auto】
快捷值：auto = 【flex：1 1 auto】（子项可扩展可收缩）
快捷值：none = 【flex：0 0 auto】（子项固定）
比例值：只定义比例，按顺序为grow、shrink值 ， basis值变auto为0%
尺寸值：只定义尺寸，值为basis的值， grow值变0为1
速记注意：
只定义比例，basis值会改变（子项原定尺寸会被覆盖）
只定义尺寸，则子项可扩展可收缩（更改默认不扩展特性）
子项核心属性的特点总结：
扩展（grow）/收缩（ shrink）是按比例操作子项的适配方式，值为纯数字类型无单位无负值 一个flex布局中， flex-shrink 和 flex-grow 只会有一个能起作用
优先使用flex复合属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
基准尺寸（ basis ）在flex模块中，替代了主轴方向上的width或height值
要保证子项的尺寸固定，通常需要在设定basis的基础上，定义grow和shrink为0。常见写法有： width/height 配合 【flex：none】 【flex：0 0 尺寸】
align-self和align-item一样，定义子项在侧轴上的对齐方式
优先级高于align-item，用于为特殊的子项定义不一样的对齐方式
值：
flex-start 起点对齐
flex-end 终点对齐
center 中间对齐
baseline 基线对齐（子项的第一行文本）（无文本则底部对齐）
stretch 默认值，拉伸对齐（子项未设置尺寸的情况下占满容器侧轴向空间）
auto：自动
order定义子项在容器中的排列顺序
值为整数，数值小的排在前面。可以为负值，默认值为 0。
