前端培訓-初級階段-場景實戰（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快速入門