国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Flex布局在小程序的使用

FingerLiu / 807人閱讀

摘要：所以為了在小程序開發(fā)中更方便地布局，有必要來(lái)詳細(xì)了解下布局在小程序的使用。本文將針對(duì)布局的各個(gè)屬性進(jìn)行介紹，并直接使用來(lái)編寫例子，運(yùn)行環(huán)境是小程序的開發(fā)者工具。在容器使用會(huì)導(dǎo)致布局失效。

一篇舊文，上手小程序時(shí)做的一些探索

Flex布局是一種十分靈活方便的布局方式，目前主流的現(xiàn)代瀏覽器基本都實(shí)現(xiàn)了對(duì)Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都實(shí)現(xiàn)了對(duì)Flex的支持。所以為了在小程序開發(fā)中更方便地布局，有必要來(lái)詳細(xì)了解下Flex布局在小程序的使用。本文將針對(duì)Flex布局的各個(gè)屬性進(jìn)行介紹，并直接使用wxss來(lái)編寫例子，運(yùn)行環(huán)境是小程序的開發(fā)者工具。

Flex布局的基本概念

Flex布局直接應(yīng)用于一個(gè)Flex容器，布局的對(duì)象是容器中的各個(gè)項(xiàng)目元素（“item”）。項(xiàng)目元素布局的核心概念在于兩條軸：主軸和交叉軸，通過(guò)控制項(xiàng)目元素在主軸、交叉軸上的排列方式進(jìn)行布局，參見下圖：

這里要注意兩條軸的方向不是固定的（可以通過(guò)flex-direction來(lái)控制）；此外一個(gè)Flex容器里可以再包含F(xiàn)lex容器，也就是能擁有多根主軸和交叉軸。

Flex容器屬性

容器屬性有6個(gè)：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

設(shè)定主軸方向：

row →（默認(rèn)）

row-reverse ←

column ↓

column-reverse↑

flex-wrap

規(guī)定如果容器在主軸方向無(wú)法容下所有項(xiàng)目，主軸上的項(xiàng)目如何換行（flex-direction為column和column-reverse時(shí)，就是“換列”了）：

nowrap（默認(rèn)），即不作換行，各個(gè)項(xiàng)目相接觸時(shí)會(huì)擠壓使寬度變小

wrap：換行，正常從上到下

wrap-reverse：換行，只是各行在交叉軸上的排列方向和wrap時(shí)相反

flex-flow

flex-direction和flex-wrap的簡(jiǎn)寫，默認(rèn)值為“row wrap”。

justify-content

所有項(xiàng)目在主軸上對(duì)齊方式：

none（默認(rèn)）

center：在主軸上居中

flex-start：主軸起點(diǎn)對(duì)齊

fex-end：主軸終點(diǎn)對(duì)齊

space-between：兩端對(duì)齊，項(xiàng)目間間隔相等

space-around：各項(xiàng)目?jī)蓚?cè)間隔相等

align-items

所有項(xiàng)目在交叉軸上對(duì)齊方式：

stretch（默認(rèn)），即項(xiàng)目取auto大小時(shí)拉伸以占滿容器的在交叉軸方向上的大小

center：在交叉軸上居中

flex-start：交叉軸起點(diǎn)對(duì)齊

flex-end： 交叉軸終點(diǎn)對(duì)齊

baseline：各項(xiàng)目第一行文字的基線對(duì)齊

align-content

定義了多根主軸的對(duì)齊方式，如果項(xiàng)目只有一根主軸則不起作用，多根主軸一般會(huì)在主軸上折行時(shí)出現(xiàn)：

stretch（默認(rèn)），即auto大小時(shí)主軸線上的項(xiàng)目會(huì)拉伸來(lái)占滿整個(gè)交叉軸。

center：在交叉軸上居中

flex-start：交叉軸起點(diǎn)對(duì)齊

flex-end： 交叉軸終點(diǎn)對(duì)齊

space-between：兩端對(duì)齊，項(xiàng)目間間隔相等

space-around：各項(xiàng)目?jī)蓚?cè)間隔相等

Flex項(xiàng)目屬性

項(xiàng)目屬性有6個(gè)：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

order

定義項(xiàng)目排列序號(hào)；默認(rèn)為0，可為負(fù)：

flex-basis

在Flex項(xiàng)目自適應(yīng)放大縮小之前，項(xiàng)目占據(jù)的主軸空間的基值。

默認(rèn)值為auto，即項(xiàng)目的本來(lái)大?。?/p>

flex-grow

注意該屬性指定的是項(xiàng)目對(duì)剩余空間的瓜分比例，這里有兩個(gè)關(guān)鍵點(diǎn)：

容器在主軸上要有剩余空間

該屬性是對(duì)剩余空間的瓜分，也即項(xiàng)目的最終大小是各項(xiàng)目的flex-basis大小、再加上瓜分得到的大小

默認(rèn)為0，即如果存在剩余空間也不放大（grow），不可為負(fù)：

flex-shrink:

空間不足時(shí)項(xiàng)目對(duì)縮小份額的瓜分比例，還是有兩個(gè)關(guān)鍵點(diǎn)：

容器在主軸上空間不足以放下所有的項(xiàng)目

空間不足可以讓項(xiàng)目縮小，而該屬性就是對(duì)縮小份額的瓜分，也即項(xiàng)目的最終大小是各項(xiàng)目的flex-basis大小、再減去瓜分得到的縮小份額

默認(rèn)為1，即如果空間不足項(xiàng)目將縮小，不可負(fù)：

flex

flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫。

默認(rèn)值為“0 1 auto”，還有兩個(gè)值auto即“1 1 auto”、none即“0 0 auto”。

align-self

讓一個(gè)項(xiàng)目有與其他項(xiàng)目不同的交叉軸對(duì)齊方式，主要用來(lái)覆蓋align-items屬性。

默認(rèn)值是auto，即繼承父元素的align-items屬性，若無(wú)父元素則等同于stretch；其他值效果和align-items一樣。

總結(jié)

Flex布局也叫彈性布局，個(gè)人理解所謂“彈性”主要體現(xiàn)在Flex項(xiàng)目的自伸縮上。主軸上的自伸縮主要通過(guò)flex-grow、flex-shrink來(lái)控制，交叉軸上的自伸縮則體現(xiàn)在align-*屬性的默認(rèn)值stretch上。

一些注意點(diǎn)

一些屬性會(huì)在對(duì)Flex項(xiàng)目上無(wú)效：column-*屬性、float 和 clear、vertical-align 。

在Flex容器使用 float 會(huì)導(dǎo)致Flex布局失效。

參考

Flex 布局教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112749.html

相關(guān)文章

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...

    garfileo 評(píng)論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...

    CoderDock 評(píng)論0 收藏0

  • 寫給 Android 開發(fā)的小程序布局指南，Flex 布局！

    摘要：不過(guò)在小程序中，這就不是我們需要考慮的了，微信已經(jīng)幫我們處理好了。而在新手階段，暫時(shí)只需要關(guān)注兩個(gè)參數(shù)指定一個(gè)塊級(jí)布局，它其內(nèi)的元素，總是起一個(gè)新行來(lái)顯示，而微信小程序的很多視圖容器組件，默認(rèn)的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

    Salamander 評(píng)論0 收藏0

  • 微信小程序①

    摘要：小程序拋棄了傳統(tǒng)的直接操作的開發(fā)方法采用了的開發(fā)思路實(shí)現(xiàn)動(dòng)態(tài)解析。借鑒之前炒的很火的框架思路實(shí)現(xiàn)了諸如單向數(shù)據(jù)綁定可移植在過(guò)程中真的是只需要關(guān)心邏輯的實(shí)現(xiàn)數(shù)據(jù)的排序避免反復(fù)的查找丶操作。 寫一個(gè)微信小程序系列的開發(fā)關(guān)鍵點(diǎn) 小程序基本架構(gòu) showImg(http://upload-images.jianshu.io/upload_images/4384845-cea5b04cbae...

    SunZhaopeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<