flex實現小程序導航新手教程。

實現示意：

1.鏈接頂部內邊距，留出圓形圖標的位置。

2.偽元素:before繪制圓形。

3.圓形中添加圖標。

4.左右外邊距控制間距，及促使在需要的地方換行。

如果需要字數限制的話：

資本

1. .serviceMenu{ 
2.  
3. display:flex;?//使用flex布局 
4.  
5. flex-wrap:wrap;?//子元素換行 
6.  
7. justify-content:center;?//子元素居中對齊 
8.  
9. padding:30rpx 0;?//留出上下邊距 
10.  
11. } 
12.  
13. .serviceMenu navigator{ 
14.  
15. position:relative;?//為了絕對定位 
16.  
17. padding-top:120rpx;?//留出圓形圖標的位置 
18.  
19. flex-basis:140rpx;?//設定基礎寬度 
20.  
21. margin:15rpx;?//觸發換行位置(小程序會自動換算，不必考慮適配) 
22.  
23. text-align:center; 
24.  
25. font-size:24rpx; 
26.  
27. } 
28.  
29. //創建圖標 
30.  
31. .serviceMenu navigator:before{ 
32.  
33. content:"/20"; 
34.  
35. position:absolute; 
36.  
37. top:0; 
38.  
39. left:50%; 
40.  
41. margin-left:-55rpx; 
42.  
43. width:110rpx; 
44.  
45. height:110rpx; 
46.  
47. border-radius:50%; 
48.  
49. background:#bbc1cd; 
50.  
51. } 
52.  
53. //設定不同圖標。注意鏈接地址是絕對地址，因為小程序不支持相對地址的背景圖。只支持image相對地址。 
54.  
55. .serviceMenu navigator:nth-child(1):before{ 
56.  
57. background:#fc6e51 url(https://xwbline.com/icon_service_big01.png) no-repeat center center; 
58.  
59. } 
60.  
61. .serviceMenu navigator:nth-child(2):before{ 
62.  
63. background:#48cfad url(https://xwbline.com/icon_service_big02.png) no-repeat center center; 
64.  
65. } 
66.  
67. ……………… 
68.  
69. text{ 
70.  
71. display:block; 
72.  
73. overflow:hidden; 
74.  
75. white-space:nowrap; 
76.  
77. text-overflow:ellipsis; 
78.  
79. }