flex實現小程序自適應圖文列表新手教程。

需求：

1.左側頭像和右側按鈕區域寬度固定。

2.文字內容區域高度寬度自動。

3.3個區塊垂直居中對齊。

4.頭像和文字區域加鏈接。

5.按鈕另外加鏈接。

實現示意圖：

1.因為頭像和文字區域要加鏈接，所以裝在一個navigator，關注按鈕是右側navigator。

2.左側的navigator中再分頭像和文字區域。

wxml：

<!--小程序中沒有列表元素，用view--><view class="anglesList">   <navigator url="https://xwbline.com/" class="anglesNavigator">     <--圖片套個view是為了漸變的邊框（其實是背景色漸變，border-radius后border寫不上漸變）。-->     <view class="imgBox">       <image src=" " mode="aspectFill"></image>       <--images中的mode="aspectFill"讓圖片保持縱橫比縮放，讓圖片的短邊能完全顯示出來。確保取到的圖片不是正方形時不留空白。-->     </view>     <view class="textBox">       <text class="name">姓名</text>      <text class="companyName">公司名職位名</text>       <text class="num">已有600人關注</text>     </view>   </navigator>   <navigator url="https://xwbline.com/" class="btnFollowed">關注</navigator> </view>

wxss：

只寫主要的樣式。

.anglesList{   display:flex;//使用flex布局   align-items:center;//子元素在垂直方向居中對齊   padding:25rpx 25rpx 25rpx 0;//留出邊距   margin-left:25rpx;//其實可以寫在內邊距中   border-bottom:1px solid #f1f1f1; } //anglesList的子元素指兩個navigator //頭像和內容區域.anglesList .anglesNavigator{   display:flex;//頭像和內容區域啟動flex布局   align-items:center;//子元素在垂直方向居中對齊   flex-grow:1;//放大，占據剩余的空間 } //頭像父層.anglesList .imgBox{   flex:0 0 110rpx;//flex 是flex-grow, flex-shrink 和 flex-basis的簡寫。flex:0 0 110rpx的意思是不放大 不縮小 固定寬度是110rpx   width:110rpx;   height:110rpx;   border-radius:50%;   padding:5rpx;   margin-right:20rpx;   background:linear-gradient(#fff,#6a6969); } //頭像.anglesList .imgBox image{   width:110rpx;   height:110rpx;   border-radius:50%; } //文字區域.anglesList .textBox{   flex-grow:1;//放大，占據剩余的空間。 } //文本限制寬度，超出隱藏 .anglesList text{   display:block;   max-width:12em;   overflow:hidden;   white-space:nowrap;   text-overflow:ellipsis; }//按鈕 .btnFollow{   flex-basis:140rpx; //指定寬度，也可以寫width  height:46rpx;   border:1px solid #007ae8;   border-radius:24rpx;   background:#fff;   text-align:center;   font-size:28rpx;   line-height:46rpx;   color:#007ae8; }