【论术】: 响应式布局——flex:1与calc的区别

莫说相公痴，更有痴似相公者。 —— 张岱《湖心亭看雪》

是什么

calc: 是css3新增的用于计算容器数值的计算函数，基于数学角度计算一个元素的数值

(flex:1)：是flex布局对于剩余空间的声明，表示占据所有剩余空间

关联与区别

calc与flex:1在做响应式布局时目的相同，尤其是在固定容器+不定容器时尤为适配。

假设对同一元素进行不定宽高设计：

calc：根据总单位长度 -某固定元素值得出当前值作为剩余空间，简单的数学思维

(flex:1): 此元素父级进行flex声明，此元素声明flex:1 表示此元素占据剩余空间，凡是需要固定值得都须定义为flex-shirk:0声明为固定宽高元素

优缺点

calc: 单纯数学计算，但是考虑到不同屏幕宽高以及缩放，固定值的数据可能不准确，从而导致最后计算数据失真。 每次新增固定容器的时候，所有与之相关的计算函数都要重新修改。
但是不止用来布局
flex:1 : 布局自适应宽高，但是会有min-height问题，如果没有设置min-height:0 ，将会导致内部容器超出当前设置容器。只能用来布局

建议与总结

布局使用flex:1
计算别的再使用calc

以上。

（flex:1） ：