微信小程式flex 布局。，小程式flex布局

小程式flex 布局。，小程式flex布局

小程式 View 支援兩種布局方式：Block 和 Flex

所有 View 預設都是 block

要使用 flex 布局的話需要顯式的聲明：

display:flex;

 

下面就來介紹下小程式的 Flex 布局

先做一個簡單的 demo

  <view class="main">    <view class="item item1">1</view>    <view class="item item2">2</view>    <view class="item item3">3</view>  </view>

加上背景色能看的更清楚些

.main {  width: 100%;  background-color: antiquewhite;}.item {  height: 100rpx;  width: 100rpx;}.item1 {  background-color: red;}.item2 {  background-color: dodgerblue;}.item3 {  background-color: greenyellow;}

然後大概是這個樣子的：

 

然後我們先都加上  display: flex

好使用 flex 布局，主意，貌似 view 不會自動繼承，需要在每個想使用的 view 裡都加上。

 

首先是橫向布局和豎向布局，要設定屬性 flex-direction ,它有4個可選值：

• row：從左至右的水平方向為主軸
• row-reverse：從右至左的水平方向為主軸
• column：從上到下的垂直方向為主軸
• column-reverse：從下到上的垂直方向為主軸

我們來看下設定 row 和 row-reverse 的區別：

row：

 

row-reverse：

 

 

然後我們要設定元素在橫向上的布局方向，需要設定 justify-content 屬性，它有5個值可選：

• flex-start：主軸起點對齊(預設值)

• flex-end：主軸結束點對齊

• center：在主軸中置中對齊

• space-between：左右對齊，除了兩端的子項目分別靠向兩端的容器之外，其他子項目之間的間隔都相等

• space-around：每個子項目之間的距離相等，兩端的子項目距離容器的距離也和其它子項目之間的距離相同

 

 

然後我們要設定元素在縱向上的布局方向，需要設定 align-items 屬性，它有5個值可選：

• stretch 填充整個容器(預設值)

• flex-start 側軸的起點對齊 （這裡我們手動設定下子 view 的高度，來看的明顯一些）

• flex-end 側軸的終點對齊

• center 在側軸中置中對齊

• baseline 以子項目的第一行文字對齊

 

 

子 View 還有個屬性 align-self，可以覆蓋父元素的 align-items 屬性，它有6個值可選：auto | flex-start | flex-end | center | baseline | stretch （auto 為繼承父元素 align-items 屬性，其他和 align-items 一致）

比如上面最後一個 baseline 的例子，我們把 item3 設定 align-self:flex-end;

就成了這個樣子：

 

 

此外還有 flex-wrap 屬性，用於控制子 View 是否換行，有3個值可選：

• nowrap：不換行（預設）
• wrap：換行
• wrap-reverse：換行，第一行在最下面

 

還有子 View 有個 order 屬性，可以控制子項目的排列順序，預設為0。

比如還是上面那個例子，我們把 item3 設定 order:-1; 可以把 item3 排在前面

 

flex 常用布局就這些

寫小程式的可以試試

作者：sun8134　　　　出處：http://sun8134.cnblogs.com/空間：http://sun8134.spaces.live.com/　　　　本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。