資訊專欄INFORMATION COLUMN
摘要：所以為了在小程序開發中更方便地布局，有必要來詳細了解下布局在小程序的使用。本文將針對布局的各個屬性進行介紹，并直接使用來編寫例子，運行環境是小程序的開發者工具。在容器使用會導致布局失效。
一篇舊文，上手小程序時做的一些探索
Flex布局是一種十分靈活方便的布局方式，目前主流的現代瀏覽器基本都實現了對Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都實現了對Flex的支持。所以為了在小程序開發中更方便地布局，有必要來詳細了解下Flex布局在小程序的使用。本文將針對Flex布局的各個屬性進行介紹，并直接使用wxss來編寫例子，運行環境是小程序的開發者工具。
Flex布局的基本概念Flex布局直接應用于一個Flex容器，布局的對象是容器中的各個項目元素（“item”）。項目元素布局的核心概念在于兩條軸：主軸和交叉軸，通過控制項目元素在主軸、交叉軸上的排列方式進行布局，參見下圖：
這里要注意兩條軸的方向不是固定的（可以通過flex-direction來控制）；此外一個Flex容器里可以再包含Flex容器，也就是能擁有多根主軸和交叉軸。
Flex容器屬性容器屬性有6個：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction設定主軸方向：
row →（默認）
row-reverse ←
column ↓
column-reverse↑
flex-wrap規定如果容器在主軸方向無法容下所有項目，主軸上的項目如何換行（flex-direction為column和column-reverse時，就是“換列”了）：
nowrap（默認），即不作換行，各個項目相接觸時會擠壓使寬度變小
wrap：換行，正常從上到下
wrap-reverse：換行，只是各行在交叉軸上的排列方向和wrap時相反
flex-flowflex-direction和flex-wrap的簡寫，默認值為“row wrap”。
justify-content所有項目在主軸上對齊方式：
none（默認）
center：在主軸上居中
flex-start：主軸起點對齊
fex-end：主軸終點對齊
space-between：兩端對齊，項目間間隔相等
space-around：各項目兩側間隔相等
align-items所有項目在交叉軸上對齊方式：
stretch（默認），即項目取auto大小時拉伸以占滿容器的在交叉軸方向上的大小
center：在交叉軸上居中
flex-start：交叉軸起點對齊
flex-end： 交叉軸終點對齊
baseline：各項目第一行文字的基線對齊
align-content定義了多根主軸的對齊方式，如果項目只有一根主軸則不起作用，多根主軸一般會在主軸上折行時出現：
stretch（默認），即auto大小時主軸線上的項目會拉伸來占滿整個交叉軸。
center：在交叉軸上居中
flex-start：交叉軸起點對齊
flex-end： 交叉軸終點對齊
space-between：兩端對齊，項目間間隔相等
space-around：各項目兩側間隔相等
Flex項目屬性項目屬性有6個：
order
flex-basis
flex-grow
flex-shrink
flex
align-self
order定義項目排列序號；默認為0，可為負：
flex-basis在Flex項目自適應放大縮小之前，項目占據的主軸空間的基值。
默認值為auto，即項目的本來大小：
flex-grow注意該屬性指定的是項目對剩余空間的瓜分比例，這里有兩個關鍵點：
容器在主軸上要有剩余空間
該屬性是對剩余空間的瓜分，也即項目的最終大小是各項目的flex-basis大小、再加上瓜分得到的大小
默認為0，即如果存在剩余空間也不放大（grow），不可為負：
flex-shrink:空間不足時項目對縮小份額的瓜分比例，還是有兩個關鍵點：
容器在主軸上空間不足以放下所有的項目
空間不足可以讓項目縮小，而該屬性就是對縮小份額的瓜分，也即項目的最終大小是各項目的flex-basis大小、再減去瓜分得到的縮小份額
默認為1，即如果空間不足項目將縮小，不可負：
flexflex-grow, flex-shrink 和 flex-basis的簡寫。
默認值為“0 1 auto”，還有兩個值auto即“1 1 auto”、none即“0 0 auto”。
align-self讓一個項目有與其他項目不同的交叉軸對齊方式，主要用來覆蓋align-items屬性。
默認值是auto，即繼承父元素的align-items屬性，若無父元素則等同于stretch；其他值效果和align-items一樣。
總結Flex布局也叫彈性布局，個人理解所謂“彈性”主要體現在Flex項目的自伸縮上。主軸上的自伸縮主要通過flex-grow、flex-shrink來控制，交叉軸上的自伸縮則體現在align-*屬性的默認值stretch上。
一些注意點一些屬性會在對Flex項目上無效：column-*屬性、float 和 clear、vertical-align 。
在Flex容器使用 float 會導致Flex布局失效。
參考Flex 布局教程
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112749.html
摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經幫我們處理好了。而在新手階段，暫時只需要關注兩個參數指定一個塊級布局，它其內的元素，總是起一個新行來顯示，而微信小程序的很多視圖容器組件，默認的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...
摘要：小程序拋棄了傳統的直接操作的開發方法采用了的開發思路實現動態解析。借鑒之前炒的很火的框架思路實現了諸如單向數據綁定可移植在過程中真的是只需要關心邏輯的實現數據的排序避免反復的查找丶操作。 寫一個微信小程序系列的開發關鍵點 小程序基本架構 showImg(http://upload-images.jianshu.io/upload_images/4384845-cea5b04cbae...
閱讀 2109·2023-04-26 00:50
閱讀 2479·2021-10-13 09:39
閱讀 2200·2021-09-22 15:34
閱讀 1605·2021-09-04 16:41
閱讀 1335·2019-08-30 15:55
閱讀 2433·2019-08-30 15:53
閱讀 1707·2019-08-30 15:52
閱讀 748·2019-08-29 16:19
