?

?

　　小程序建議使用flex布局進行排版

　　flex是一個盒裝彈性布局

　　flex是一個容器，所有子元素都是他的成員

　　

　　定義布局：display:flex

?

　　flex容器的屬性：

　　　　一、flex-direction：排列方向

　　　　二、flex-wrap：換行規則

　　　　三、justify-content：對齊方式

　　　　四、order：成員之間的顯示順序

　　　　五、flex：成員所占屏幕的比例

?

一、flex-direction：排列方向

　　【默認】row：從左到右行排序

　　row-reverse：從右到左行排序

　　colomn：從上到下列排序

　　colomn-reverse：從下到上列排序

　　index.html中定義五個<view>分別加上a、b、c、d、e五個文本標簽，微信小程序中默認flex-direction:row

?

<!--index.wxml--> Cynical丶Gary <view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view> index.html

?

.container{display: flex;/* 默認從左到右排序 *//* flex-direction: row; *//* 從右到左排序 *//* flex-direction: row-reverse; *//* 從上到下排序 *//* flex-direction: column; *//* 從下到上排序 *//* flex-direction: column-reverse; */}.size{width: 150rpx;height: 150rpx; }.a{background: red; }.b{background: yellow; }.c{background: blue; }.d{background: green; }.e{background: orange; } index.wxss

?

?

二、flex-wrap：換行規則

　　【默認】nowrap：不換行

　　wrap：換行

　　wrap-reverse：逆向換行

　　當五個元素size超出微信小程序橫向排版時（320），微信小程序默認使用flex-wrap: nowrap不換行

?

<!--index.wxml--> Cynical丶Gary <view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view> index.wxml

?

.container{display: flex;/* 默認不換行 *//* flex-wrap: nowrap; *//* 換行 *//* flex-wrap: wrap; *//* 逆向換行 *//* flex-wrap: wrap-reverse; */}.size{width: 500rpx;height: 150rpx; }.a{background: red; }.b{background: yellow; }.c{background: blue; }.d{background: green; }.e{background: orange; } index.wxss

?

?

三、justify-content：對齊方式

　　【默認】flex-start：從左到右，向左對齊

　　flex-end：從右到左，向右對齊

　　center：居中對齊

　　space-between：塊級元素中間有空格

　　space-around：讓空格圍繞在成員周圍

　　當五個元素并列排序size未超出微信小程序橫向布局

?

<!--index.wxml--> Cynical丶Gary <view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view> index.wxml

?

.container{display: flex;/* flex-start:默認左對齊 *//* justify-content: flex-start; *//* flex-end:向右對齊 *//* justify-content: flex-end; *//* center:居中對齊 *//* justify-content: center; *//* space-between:塊級元素中間有空格 *//* justify-content: space-between; *//* space-around:讓空格圍繞在成員周圍 *//* justify-content:space-around; */ }.size{width: 100rpx;height: 150rpx; }.a{background: red; }.b{background: yellow; }.c{background: blue; }.d{background: green; }.e{background: orange; } index.wxss

?

?

四、order：成員之間的顯示順序

　　五個元素并列排序由order屬性決定，本來d和e中order屬性分別是4和5，現將order屬性改為5和4，可見d和e塊級元素位置進行了交換

?

<!--index.wxml--> Cynical丶Gary <view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view> index.wxml

?

.container{display: flex;}.size{width: 100rpx;height: 150rpx; }.a{background: red;order:1; }.b{background: yellow;order:2; }.c{background: blue;order:3; }.d{background: green;order:4; }.e{background: orange;order:5; } index.wxss

?

?

五、flex：成員所占屏幕的比例

　　當給五個塊級元素a、b、c、d、e設置order為1時候，每個元素所占當行比例的1/5，當將a的order設置為3時，a元素占當行比例的3/(3+1+1+1+1)，依次類推

?

<!--index.wxml--> Cynical丶Gary <view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view> index.wxml

?

.container{display: flex;}.size{width: 100rpx;height: 150rpx; }.a{background: red;order:1;flex:10; }.b{background: yellow;order:2;flex:2; }.c{background: blue;order:3;flex:1; }.d{background: green;order:4;flex:1; }.e{background: orange;order:5;flex:1; } index.wxss

?

轉載于:https://www.cnblogs.com/1138720556Gary/p/10604039.html

總結

以上是生活随笔為你收集整理的微信小程序_(组件)flex布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。