flex: 0 0 auto

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：1 即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

补充

• position:fixed 默认是相对浏览器窗口定位的，想实现相对父级元素定位，给父元素加上 transform:translate(0,0) ，fixed即可根据父容器定位；
• 曲线阴影： box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
• 单独设置盒模型的四个边的阴影样式：
  0px -10px 0px 0px #ff0000, /*上边阴影 红色*/
  -10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/
  10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/
  0px 10px 0px 0px #eede15; /*下边阴影 黄色*/

参考文章：https://www.cnblogs.com/LangZ-/p/12703858.html