【学一点儿前端】box-sizing以及flex:1的解释

box-sizing

box-sizing 是一种用于控制CSS盒子模型行为的CSS属性。它的作用是指定元素的宽度和高度的计算方式，以确定元素的总尺寸。
具体来说，box-sizing 可以有两个可能的取值：
1.content-box（默认值）：
当 box-sizing 设置为 content-box 时，元素的宽度和高度仅包括内容区域的尺寸，不包括边框（border）和内边距（padding）。
这意味着，如果您设置一个元素的宽度为100px，然后添加10px的边框和20px的内边距，那么元素的总宽度将变为100px + 10px（左边框）+ 10px（右边框）+ 20px（左内边距）+ 20px（右内边距）= 160px。
2.border-box：
当 box-sizing 设置为 border-box 时，元素的宽度和高度包括内容区域、边框和内边距的尺寸。
这意味着，如果您设置一个元素的宽度为100px，然后添加10px的边框和20px的内边距，元素的总宽度将保持为100px，边框和内边距的尺寸将从内容区域中减去。

flex:1

这个内容和上面没有关系，只是我今天搜到的

基本概念

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（后两个属性可选）。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

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，即 项目原本大小；
设置后项目将占据固定空间。大白话
当一个容器设置display:flex变成一个flex容器后，如果容器没有被占满，换言之有剩余空间，则flex-grow起作用。
相反，若空间不足，则flex-shrink起作用。
在计算放大或缩小比例时，要根据flex-basis的值来计算比例。

flex:1

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

flex:1和flex:auto的区别

flex:1
flex-grow : 1;flex-shrink : 1;flex-basis : 0%;

flex:auto
flex-grow : 1;flex-shrink : 1;flex-basis : auto;

参考文章：『前端大白话』之 “flex:1”