最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。场景战斗的内容因人而异。所以最近的更新基本都是我遇到和解决的问题。我会在稍后发布他们的内容。我们要谈什么？本节讲的是聊天消息遇到的问题，群消息的头像，哈哈，是不是感觉很眼熟？是的，这是我之前提出的问题。我们先来了解一下需求。微信上的每个人都有。拉一个群，关注群头像。会有以下效果。今天我们要实现它。flex实现微信头像布局效果地址。本来是在JSRun里面的，但是我哥最近有点不稳定，连接不上。如果你说一些关于Flex的东西，我不知道该怎么做。我之前写的Flex教程很受欢迎。看第一个效果（avatar3），一个在上面，两个在下面。想想哪些属性合适？flex-wrap用于规定内容放不下，如何换行onBelow）（两个在下，一个在上）有没有发现效果是对的，但是排序的头像错了？微信头像按添加时间从小到大排序。不用担心，渲染的时候倒过来就可以了，负负就是正。.头像平分，我指的是100px。一个90像素，两个45像素，三个30像素。然后使用百分比来实现它。为什么要使用百分比？因为你不能保证所有的地方都是100px。那你有没有发现多行的时候间距有问题？align-content定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。设置background-image就可以实现微信头像布局效果地址了，我还是个孩子，写起来好烦，我就写前几行好吗？这种效果的实现依赖于多背景的实现。背景——MDNabsolute实现效果地址。感觉比之前的方案好写，但还是有难度。我只写了前几个。文档流+after/before填充效果地址，基本上属于看哪里错改哪里，操作上比前面两种方案简单。其他思路需要在需要换行的地方插入br标签，然后水平居中。使用填充进行垂直居中。方案同上，垂直居中换成table-cell。和其他方法。网格方案优缺点方案理解程度位置控制描述??Flex容易理解，思路清晰，但不能针对设计稿进行微调，但代码复杂，难以理解和修改。比背景图更好理解，文档流中的可控性更好，但代码无关，容易修改。不建议。格中强后记你有什么打算吗？可以在评论区留言讨论今天的分享——TypeScript快速入门
