摘要：我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。实现微信头像布局效果地址，本来是在的，但是大哥最近有点不稳定老连不上。设置一下就好了实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。
我们要讲什么？这节还是聊天消息中遇到的问题，群组消息之头像，哈哈是不是感觉好熟悉，对的是我之前抛出的一个问题。
我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。
效果地址，本来是在JSRun的，但是大哥最近有点不稳定老连不上。如果你说什么Flex我不会啊，之前写的Flex的教程一发入魂。
看第一个效果（avatar3）一个在上，两个在下，想想有什么属性适合？flex-wrap 用来规定内容放不下，如何换行
nowrap(不换行)（默认值）
wrap(换行，第一行在上方)（两个在上，一个在下）
wrap-reverse(换行，第一行在下方)（两个在下，一个在上）
是不是发现，效果对了，但是排序的头像错了？微信头像是加群时间升序的。不用担心，渲染的时候取反就ok，负负得正嘛。。
头像等分，我是参照100px。一个90px,两个45px，三个30px。然后使用百分比实现。为什么要用百分比呢？因为你也不能保证所有地方都是100px吧。
然后你是不是发现多行的时候，间距有问题？align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。设置一下就好了
background-image 实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。
这个效果的实现依赖于多重背景实现，background --MDN
效果地址，写起来感觉比上一个方案要简单一点，但是，还是不好写。我只写了前几个。
文档流+after/before填充效果地址，基本上属于看到哪里不对改哪里，操作上来说，比上两个方案要简单一些。
需要换行的地方插入br标签，然后水平居中。垂直居中使用padding。
方案同上垂直居中换成table-cell。等其他方法。
grid
方案优缺点| 方案 | 理解程度 | 位置控制 | 描述 |
|---|---|---|---|
| flex | 易 | 弱 | 很好理解，思路清晰，但是无法对于设计稿精细微调 |
| 背景图 | 难 | 强 | 高可控性，但是代码复杂，不易理解修改 |
| 绝对定位 | 难 | 强 | 高可控性，但是代码复杂，不易理解修改，比背景图还是要好理解一点 |
| 文档流 | 中 | 中 | 可控性较好，但是代码无关联，易于修改。不推荐。 |
| grid | 中 | 强 |
你有什么方案可以在评论区留言讨论
今日分享-TypeScript快速入门
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114623.html
摘要：我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。实现微信头像布局效果地址，本来是在的，但是大哥最近有点不稳定老连不上。设置一下就好了实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/...
摘要：我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。实现微信头像布局效果地址，本来是在的，但是大哥最近有点不稳定老连不上。设置一下就好了实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/...
摘要：控件介绍这是一个简单到设置一个网址即可显示图片的控件相对功能的扩展的控件但是没有继承直接继承的比如群组头像微信群组头像设置描边设置圆角矩形头像圆形头像等几个参数搞定对于多个图片的排列和图片的具体显示进行了接口分离可以自定义实现任何排列效果和 控件介绍 这是一个简单到sImageView.setImageUrls(http://img3.cache.netease.com/ent/200...
摘要：关于聊天室项目聊天室项目，也被称为即时通讯。可以满足一个即时通讯类的绝大部分功能。其中用的最多的是极光，不仅仅是依赖于极光即时通讯服务，后期还会引入统计分享等相关的。 关于聊天室项目 聊天室项目，也被称为即时通讯（IM）。 其原理是服务器是一直在启动状态的线程，不断的从客户端（App）获取消息，收到消息后，进行类型和发送目标判断，以发送到群组或者单聊的方式，客户端收到消息后进行界面的展...
摘要：关于聊天室项目聊天室项目，也被称为即时通讯。可以满足一个即时通讯类的绝大部分功能。极光官方提供的有即时通讯，包括等都实现了，只需要简单配置就可以用。其中用的最多的是极光，不仅仅是依赖于极光即时通讯服务，后期还会引入统计分享等相关的。 关于聊天室项目 聊天室项目，也被称为即时通讯（IM）。 其原理是服务器是一直在启动状态的线程，不断的从客户端（App）获取消息，收到消息后，进行类型和发送...
阅读 4333·2021-09-29 09:34
阅读 1226·2021-09-24 10:38
阅读 1291·2021-09-22 15:15
阅读 2797·2021-09-09 09:33
阅读 782·2019-08-30 11:08
阅读 523·2019-08-30 10:52
阅读 1125·2019-08-30 10:52
阅读 2196·2019-08-28 18:01
