前端培训-初级阶段-场景实战（2019-05-16）-聊天头像-微信头像-群组头像

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

场景实战这块内容每一个人的内容都不同。因此最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。

咱们要讲什么？

这节仍是聊天消息中遇到的问题，群组消息之头像，哈哈是否是感受好熟悉，对的是我以前抛出的一个问题。
咱们先来了解一下需求，微信你们都有吧，拉个群注意观察群头像。会成为以下效果。今天咱们就是要实现一下它。

flex 实现微信头像布局

效果地址，原本是在JSRun的，可是大哥最近有点不稳定老连不上。若是你说什么Flex我不会啊，以前写的Flex的教程一发入魂。

1. 看第一个效果（avatar3）一个在上，两个在下，想一想有什么属性适合？flex-wrap 用来规定内容放不下，如何换行

   1. nowrap(不换行)（默认值）
   2. wrap(换行，第一行在上方)（两个在上，一个在下）
   3. wrap-reverse(换行，第一行在下方)（两个在下，一个在上）
2. 是否是发现，效果对了，可是排序的头像错了？微信头像是加群时间升序的。不用担忧，渲染的时候取反就ok，负负得正嘛。。
3. 头像等分，我是参照100px。一个90px,两个45px，三个30px。而后使用百分比实现。为何要用百分比呢？由于你也不能保证全部地方都是100px吧。
4. 而后你是否是发现多行的时候，间距有问题？align-content 定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。设置一下就行了

background-image 实现微信头像布局

效果地址，我仍是个孩子，写起来真的烦啊，我就写前几个好很差。
这个效果的实现依赖于多重背景实现，background --MDN

absolute 实现

效果地址，写起来感受比上一个方案要简单一点，可是，仍是很差写。我只写了前几个。

文档流+after/before填充

效果地址，基本上属于看到哪里不对改哪里，操做上来讲，比上两个方案要简单一些。

其余思路

1. 须要换行的地方插入br标签，而后水平居中。垂直居中使用padding。
2. 方案同上垂直居中换成table-cell。等其余方法。
3. grid

方案优缺点

方案	理解程度	位置控制	描述
flex	易	弱	很好理解，思路清晰，可是没法对于设计稿精细微调
背景图	难	强	高可控性，可是代码复杂，不易理解修改
绝对定位	难	强	高可控性，可是代码复杂，不易理解修改，比背景图仍是要好理解一点
文档流	中	中	可控性较好，可是代码无关联，易于修改。不推荐。
grid	中	强

后记

你有什么方案能够在评论区留言讨论
今日分享-TypeScript快速入门