Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式。通过Flex布局，可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会附上效果图，具体实现代码会以github路径形式更新于此。 注意，设为 Fle…

备注：1、设置flex-wrap：wrap，不然默认nowrap按照比例排满一行。 有不足之处，请评论留言... 谢谢

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…

面试高频考点，之前就记了个比较有名的圣杯布局，没想到面试官问了我上下栏固定、中间自适应的布局，措手不及。借此弥补下CSS布局方面的知识。 （以下代码我都在浏览器上跑过，基本能够实现布局要求。） 在网上找了下关于上中下布局的文章，发现资料很少，所以总结的不是很好，如果大家有更完整…

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度…

页脚置底（Sticky footer）就是让网页的 footer 部分始终在浏览器窗口的底部。这样的布局随处可见，偶然看到 CSS-TRICKS 上介绍页脚置底的文章觉得不错，对开阔布局的思路挺有帮助，遂译之。

PC适配, IE一直是前端程序员头大的问题, 由于最初网页标准不统一, 各大厂商都有自己实现浏览器的一套标准, 这就导致很多的公共API不能够实现全浏览器平台, 以IE为主. 曾经IE 可以说是FEE最厌恶的浏览器. 逃离的PC端, 当你拥抱移动端时候, 你会发现, 又陷入另外…

遥想去年入前端坑的时候，就很快遇到了移动端页面的开发，天(er)真(bi)的我立马上去量设计稿，然后撸起袖子就是干！可是打开调试一看乱套了，先不说布局上的问题，就是大小看起来也不太对啊，太大了！然后就去问老司机，他说尺寸你要除以2才行，我心里挺郁闷的，为啥啊。。当时项目紧，就先…

本文思维导图，欢迎补充 本文首发于我的个人网站：http://cherryblog.site 前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 C…