預展
首先進行結構劃分：頭部，內容區域，底部
頭部和底部是固定高度
內容區域是自適應撐開
三部分是自上而下，二flex布局是從左向右，所以利用flex-direction:colum ,將其列排
頭部：
利用flex布局：給其父元素新增：display：flex
子元素：flex：1 平均的鋪滿
至於距離，+margin/padding
底部：和頭部如出一轍，只不過內部結構稍微 複雜些
但是兩個text文字都是一行顯示，可以設定快元素：display：block
內容區域：
本來要做輪播，但是有限，就放了一張圖
：寬：100% ，高100px
這三小塊，用三個view包起來
父元素：display：flex 子元素 flex：1
但是這時你用text-aline：center 發現居中不了，你需要將text和image都轉化成display：block
image：用margin :auto text用 text-align:center
文字太多，顯示... 的**
overflow: hidden; 超出部分隱藏
text-overflow: ellipsis; 顯示小圓點
white-space: nowrap; 不換行
需要素材的滴滴我
微信小程式 flex布局
flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...
微信小程式開發 Flex布局
flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，在一行內顯示子...