最近在项目开发的时候遇到一个问题，就是在 flex 布局的时候，设置了 flex 元素高度的时候，发现高度设置完没有生效，需要设置 flex 元素的 flex-shrink 属性为 0 才能生效，这是为啥？ 想要理解这个问题，需要理解下面这三个 flex 元素的属性 flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？ `flex-shr ...

今天在实现一个前端效果的时候才发现 CSS 的盒子模型并不是只有一种，而且之前对盒模型也没有太深入了解过，盒子模型其实 CSS 布局的基础，不了解盒子模型的花，那 CSS 布局过程中一定会踩到很多坑，遇到很多不明白的现象。 什么是盒子模型？ 所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。整个 H5 页面就是由这些盒子模型组成的 ...

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