微信小程序的浮動與定位，flex布局

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序的浮動與定位，flex布局。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1.元素浮動與清除

元素浮動就是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的控制 , 移到其父元素中指定位置的過程。在css 中 , 通過float屬性來定義浮動 , 其基本格式如下 :

　 { float : none ｜left ｜right ;}

(1)其中 , none ——— 默認(rèn)值 , 表示元素不浮動 ;

(2)left ——— 元素向左浮動 ;

(3right ——— 元素向右浮動。

? 由于浮動元素不再占用原文檔流的位置 , 因此它會對頁面中其他元素的排列產(chǎn)生影響。

示例代碼:

<view>box1，box2,box3</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="border: 1px solid #f00;padding: 5px;">box1

</view>
<view style="border: 1px solid #f00;padding: 5px;">box2

</view>
<view style="border: 1px solid #f00;padding: 5px;">box3

</view>

</view>
<view>box1 左浮動</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: left; border: 1px solid #f00;padding: 5px;">box1

</view>
<view style="border: 1px solid #f00;padding: 5px;">box2

</view>
<view style="border: 1px solid #f00;padding: 5px;">box3

</view>
</view>
<view>box1，box2左浮動</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float :left ;border:1px solid #0f0 ">
</view>
<view style="float :left ;border:1px solid #0f0">
</view>
<view style="float :left ;border:1px solid #0f0">
</view>
<view style="float :left ;border:1px solid #0f0">
</view>
</view>

運(yùn)行結(jié)果圖：

? float小程序,微信小程序,notepad++,小程序

在ＣＳＳ中 , ｃｌｅａｒ屬性用于清除浮動元素對其他元素的影響 , 其基本格式如下 :

其中 , ｌｅｆｔ ——— 清除左邊浮動的影響 , 也就是不允許左側(cè)有浮動元素 ;

ｒｉｇｈｔ ——— 清除右邊浮動的影響 , 也就是不允許右側(cè)有浮動元素 ;

ｂｏｔｈ ——— 同時(shí)清除左右兩側(cè)浮動的影響 ;

ｎｏｎｅ ——— 不清除浮動。

?代碼如下：

<view>box1，box2左浮動 box3清除左浮動</view>
<view>
<view style="border: 1px solid #f00;"></view>
<view style="border:  1px solid #f00;padding: 5px;"></view>
<view style="float: left;border: 1px solid #f0f;">box1</view>
<view style="float: left;border: 1px solid #f0f;">box2</view>
<view style="clear: left;border: 1px solid #f0f;">box2</view>

</view>

結(jié)果如圖：

? float小程序,微信小程序,notepad++,小程序

2.元素定位?

３ . ３ . ２　元素定位

浮動布局雖然靈活 , 但無法對元素的位置進(jìn)行精確的控制。在css中 , 通過postion?屬性可以實(shí)現(xiàn)對頁面元素的精確定位。基本格式如下 :

{position :static |relative|absolute|fixed}

(1)其中 , static ——— 默認(rèn)值 , 該元素按照標(biāo)準(zhǔn)流進(jìn)行布局 ;

(2)relative ——— 相對定位 , 相對于它在原文檔流的位置進(jìn)行定位 , 它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它 ;

(3)ａｂｓｏｌｕｔｅ ——— 絕對定位 , 相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位 , 絕對定位的盒子從標(biāo)準(zhǔn)流中脫離 , 它對其后的兄弟盒子的定位沒有影響 ;

(4)ｆｉｘｅｄ ——— 固定定位 , 相對于瀏覽器窗口進(jìn)行定位。

代碼示例如下：

（1）不動的情況下：

<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box1 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box2 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box3 </view>

結(jié)果圖：

? float小程序,微信小程序,notepad++,小程序

（2）進(jìn)行絕對定位

代碼如下：

<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box1 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;position: absolute;left: 30px;top: 30px;">box2 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box3 </view>

結(jié)果圖：

? float小程序,微信小程序,notepad++,小程序

（3）進(jìn)行相對定位：?

代碼：

<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box1 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;position: relative;left: 30px;top: 30px;">box2 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box3 </view>

結(jié)果如圖：?

float小程序,微信小程序,notepad++,小程序

?（4）進(jìn)行固定定位

代碼如下：

<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box1 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;position: fixed;left: 30px;top: 30px;">box2 </view>
<view style="border: 1px solid #0f0;width: 100px ;height: 100px;">box3 </view>

結(jié)果如圖：

? float小程序,微信小程序,notepad++,小程序

3，flex布局?

容器默認(rèn)存在兩根軸 : 水平的主軸 ? 和垂直的交叉軸 。主軸的開始位置 ( 與邊框的交叉點(diǎn) ) 叫做mainstart , 結(jié)束位置叫做mainend ; 交叉軸的開始位置叫做cross start , 結(jié)束位置叫做corssend

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做mainsize , 占據(jù)的交叉軸空間叫做cross size

設(shè)置ｄｉｓｐｌａｙ屬性可以將一個(gè)元素指定為ｆｌｅｘ布局 , 設(shè)置ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ屬性可以指定主軸方向。主軸既可以是水平方向 , 也可以是垂直方向。

flex布局模型：

（1）容器屬性?

flex容器支持的屬性有7種，如圖：

float小程序,微信小程序,notepad++,小程序

１ . ｄｉｓｐｌａｙ

ｄｉｓｐｌａｙ用來指定元素是否為ｆｌｅｘ布局 , 語法格式為 :

其中 , ｆｌｅｘ ——— 塊級ｆｌｅｘ布局 , 該元素變?yōu)閺椥院凶?/strong> ;

ｉｎｌｉｎｅ－ｆｌｅｘ ——— 行內(nèi)ｆｌｅｘ布局 , 行內(nèi)容器符合行內(nèi)元素的特征 , 同時(shí)在容器內(nèi)又符合ｆｌｅｘ布局規(guī)范。

設(shè)置了ｆｌｅｘ布局之后 , 子元素的float、clear 和verticalalgin 屬性將失效。

２ . ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ

ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ用于設(shè)置主軸的方向 , 即項(xiàng)目排列的方向 , 語法格式為 :

.box{flex-direction:row|row-reverse|column|column-reverse}

其中 , row ——— 主軸為水平方向 , 起點(diǎn)在左端 , 當(dāng)元素設(shè)置為flex 布局時(shí) , 主軸默認(rèn)為row ;

row-reverse ——— 主軸為水平方向 , 起點(diǎn)在右端 ;

column——— 主軸為垂直方向 , 起點(diǎn)在頂端 ;

column-reverse ——— 主軸為垂直方向 , 起點(diǎn)在底端。

3.flex-wrap
flex-wrap 用來指定當(dāng)項(xiàng)目在一根軸線的排列位置不夠時(shí), 項(xiàng)目是否換行,

其語法格式如下:

.box{flex-wrap:nowrap|wrap|wrap-reverse;}
其中, nowrap———不換行, 默認(rèn)值;

wrap———換行, 第一行在上方;

wrap-reverse———換行, 第一行在下方。

? ? ?當(dāng)設(shè)置換行時(shí), 還需要設(shè)置align -item屬性來配合自動換行, 但align-item 的值不能為“seretch”。

flex-wrap 不同值的顯示效果如圖所示。

4.flex-flow

flex-flow是flex-direction 和flex-wrap 的簡寫形式, 默認(rèn)值為rownowrap。語法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}

.box{flex-flow:row nowrap;}//水平方向不換行 .box{flex-flow:row-reverse wrap;}//水平方向逆方向換行 .box{flex-flow:column wrap-reverse;}//垂直方向逆方向換行

5.justify-content
justify-content用于定義項(xiàng)目在主軸上的對齊方式。語法格式如下：

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}
justift-content———與主軸方向有關(guān), 默認(rèn)主軸水平對齊, 方向從左到右;

flex-strat———左對齊, 默認(rèn)值;

flex-end———右對齊;

center———居中;

space-between———兩端對齊, 項(xiàng)目之間的間隔都相等;

space-around———每個(gè)項(xiàng)目兩側(cè)的間隔相等。

顯示效果如下：

6.align-items
align-items用于指定項(xiàng)目在交叉軸上的對齊方式，其語法格式如下：

.box{align-items:flex-start|flex-end|center|baseline|stretch;}
align-items———與交叉軸方向有關(guān), 默認(rèn)交叉由上到下;

flex-start———交叉軸起點(diǎn)對齊;

flex-end———交叉軸終點(diǎn)對齊;

center———交叉軸中線對齊;

baseline———項(xiàng)目根據(jù)它們第一行文字的基線對齊;

ｓｔｒｅｔｃｈ———如果項(xiàng)目未設(shè)置高度或設(shè)置為ａｕｔｏ, 項(xiàng)目將在交叉軸方向拉伸填充容器, 此為默認(rèn)值。

代碼如下：

//wxml <view class="cont1"> <view class="item">1</view> <view class="item item2">2</view> <view class="item item3">3</view> <view class="item item4">4</view> </view> //wxss .cont1{ display: flex; flex-direction: row; align-items: baseline; } .item{ background-color: #ccc; border: 1px solid #f00; height: 100px; width: 50px; margin: 2px; } .item2{ height: 80px; } .item3{ display: flex; height: 50px; align-items: flex-end; } .item4{ height: 120px; }

代碼結(jié)果圖：

7.align-content
align-content用來定義項(xiàng)目有多根軸線（出現(xiàn)換行后）在交叉軸上的對齊方式，如果只有一根軸線，該屬性不起作用。語法格式如下：

.box{align-content:flexx-start|flex-end|center|space-between|space-around|stretch}
space-between———與交叉軸兩端對齊, 軸線之間的間隔平均分布;

space-around———每根軸線兩側(cè)的間隔都相等, 軸線之間的間隔比軸線與邊框間隔大一倍。

其余各屬性值的含義與ａｌｉｇｎ－ｉｔｅｍｓ屬性的含義相同。如圖所示：

（2）項(xiàng)目屬性

功能表如下所示：

1.order

order屬性定義項(xiàng)目的排列順序, 數(shù)值越小, 排列越靠前, 默認(rèn)值為０。語法格式如下:

.item{order:<number>;}

舉例代碼如下：

<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item" style="order:1">1</view> <view class="item" style="order:3">2</view> <view class="item" style="order:2">3</view> <view class="item">4</view> </view>

?

2.flex-grow

flex-grow定義項(xiàng)目的放大比例，默認(rèn)值為0，即不放大。語法格式如下：

.item{flex-grow:<number>;}

代碼如下：?

<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">1</view> <view class="item" style="flex-grow: 1;">2</view> <view class="item" style="flex-grow: 2;">3</view> <view class="item">4</view> </view>

結(jié)果如圖：

?

3.flex-shrink

flex-shrink用來定義項(xiàng)目的縮小比例，默認(rèn)值為1，如果空間不足，該項(xiàng)目將被縮小。

語法格式如下：

.item{flex-shrink:<number>;}

舉例代碼：?

<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">1</view> <view class="item" style="flex-shrink: 2">2</view> <view class="item" style="flex-shrink: 1">3</view> <view class="item" style="flex-shrink: 4">4</view> </view>

結(jié)果圖如下：

4.flex-basis

flex-basis屬性用來定義伸縮項(xiàng)目的基準(zhǔn)值，剩余的空間將按比例進(jìn)行縮放，它的默認(rèn)值為auto（即項(xiàng)目的本來大?。?。

語法格式如下:

.item{flex-basis:<number>|auto;}

舉例代碼：

<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">1</view> <view class="item" style="flex-basis:100px;">2</view> <view class="item" style="flex-basis: 200px;">3</view> <view class="item">4</view> </view>

效果圖:?

?

5.flex
flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，其默認(rèn)值分別為0、1、auto。

語法格式如下：

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

示例代碼如下：

.item{flex:auto;}//等價(jià)于.item{flex:1 1 auto;} .item{flex:none;}//等價(jià)于.item{flex:0 0 aoto;}

?

6.algin-self

align-self屬性用來指定單獨(dú)的伸縮項(xiàng)目在交叉軸上的對齊方式。該屬性會重寫默認(rèn)的對齊方式。語法格式如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-854003.html

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

到了這里，關(guān)于微信小程序的浮動與定位，flex布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！