資訊專欄INFORMATION COLUMN
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。
前端最基礎的就是 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快速入門
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109459.html
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/...
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/...
閱讀 1443·2021-11-22 13:54
閱讀 4322·2021-09-22 15:56
閱讀 1815·2021-09-03 10:30
閱讀 1318·2021-09-03 10:30
閱讀 2085·2019-08-30 15:55
閱讀 1850·2019-08-30 14:13
閱讀 2058·2019-08-29 15:19
閱讀 2340·2019-08-28 18:13
