共计 1017 个字符，预计需要花费 3 分钟才能阅读完成。
flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写，举荐应用此简写属性，而不是独自下这三个属性。
flex-grow：定义我的项目的放大比例：
● 默认为 0，即便存在残余空间也不会放大；
● 所有我的项目的 flex-grow 为 1：等分残余空间（主动放大占位）；
● flex-grow 为 n 的我的项目：占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍；
flex-shrink：定义我的项目的放大比例：
● 默认为 1，如果空间有余，该我的项目将放大；
● 所有我的项目的 flex-shrink 为 1：当空间有余时，放大的比例雷同；
● flex-shrink 为 0：空间有余时，该我的项目不会放大；
● flex-shrink 为 n 的我的项目：空间有余时放大的比例是 flex-shrink 为 1 的 n 倍；
flex-basis：定义在调配多余空间之前，我的项目占据的主轴空间（main size），浏览器依据此属性计算主轴是否有多余空间
● 默认值为 auto，即我的项目本来大小；
● 设置后我的项目将占据固定空间；
所以 flex 属性的默认值为：0 1 auto（不放大会放大）
flex 为 none：0 0 auto（不放大也不放大）
flex 为 auto：1 1 auto（放大且放大）
flex 为一个非负数字 n：该数字为 flex-grow 的值。flex：n；= flex-grow：n；flex-shrink：1；flex-basis：0%；
flex 为两个非负数字 n1，n2：别离为 flex-grow 和 flex-shrink 的值。flex：n1 n2；= flex-grow：n1；flex-shrink：n2；flex-basis：0%；
flex 为一个长度或百分比 L：视为 flex-basis 的值。flex:：L；=flex-grow：1；flex-shrink：1；flex-basis：L；
flex 为一个非负数字 n 和一个长度或百分比 L：别离为 flex-grow 和 flex-basis 的值。flex：n L；=flex-grow：n；flex-shrink：1；flex-basis：L;
能够发现，flex-grow 和 flex-shrink 在 flex 属性中不规定值则为 1，flex-basis 为 0%。
flex：1 即为 flex-grow：1，常常用作自适应布局，将父容器的 display：flex，侧边栏大小固定后，将内容区 flex：1，内容区则会主动放大占满残余空间。