最近在项目开发的时候遇到一个问题，就是在 flex 布局的时候，设置了 flex 元素高度的时候，发现高度设置完没有生效，需要设置 flex 元素的 flex-shrink 属性为 0 才能生效，这是为啥？

想要理解这个问题，需要理解下面这三个 flex 元素的属性

• flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？
• flex-shrink：该元素要消除（收缩）多少负可用空间（negative free space）？
• flex-basis：在该元素未伸张和收缩之前，它的大小是多少？

今天在实现一个前端效果的时候才发现 CSS 的盒子模型并不是只有一种，而且之前对盒模型也没有太深入了解过，盒子模型其实 CSS 布局的基础，不了解盒子模型的花，那 CSS 布局过程中一定会踩到很多坑，遇到很多不明白的现象。

什么是盒子模型？

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。整个 H5 页面就是由这些盒子模型组成的元素来构成。

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）

问题起源

前几天做前端 Vue 项目的时候发现一个有意思的事情，就是当我要设置一个瀑布流样式的视图的时候，类似下面这种样式，我怎么设置一个信息组件（带文字的小图片）的宽度是屏幕宽度的一半呢？有前端经验的小伙伴会说直接用 50vw 啊？但是如果考虑到两边的间距（比如容器标签有padding设置）的话，50vw 的设置可能会让一行只能展示出一个组件（展示两个就超出屏幕宽度了），那怎么设置这个小的信息组件的宽度就是个问题。

最后前端同事跟我说可以直接按照设计稿标注的组件的宽度进行设置，而且单位是px，当时我就懵了，那如果设备屏幕变大的话，不就有可能横向会展示三个信息组件了吗？前端同事嘿嘿一笑，说项目里有个库可以把 px 转化为 rem，rem 是什么鬼？