1月9號微信小程序正式發(fā)布，前一段時間看過一段時候的小程序，后來趕項目就放在一邊了，年關(guān)將至，公司經(jīng)過了一輪大的裁員之后，為了過個好年，認慫的我，選擇留了下來，開始了自學(xué)之路。本身自己不是什么大牛，寫出了的東西只是為了記錄自己的學(xué)習(xí)過程，如果有人看了我的簡書，學(xué)到了一下東西，我會很高興。歡迎大家批評指正，讓我在程序員的路上一路到底?。。?/p>

學(xué)前端的朋友，可能對于flex布局會特別的熟悉，微信的flex布局和css的flex布局相同的，在這里我就只是簡單的介紹一下?？梢宰龅绞褂眉纯?。

Flex布局的特點:

任意方向的伸縮，向左，向右，向下，向上

在樣式層可以調(diào)換和重排順序

主軸和側(cè)軸方便配置

子元素的空間拉伸和填充

沿著容器對齊。

什么是彈性容器？

彈性框模型分為彈性容器以及彈性項目。當組件的display為flex或inline-flex時，該組件則為彈性容器，彈性容器的子組件為彈性項目。

小程序中的dispay屬性來標識顯示方式

display:block指定為塊內(nèi)容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認都是dispaly:block。

display:flex:指定為行內(nèi)容器模式，在一行內(nèi)顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)

flex

flex 分為主軸和側(cè)軸，通俗的將就是橫向和豎向，

flex-direction 屬性來表示主軸方向：

row:從左到右的水平方向為主軸

row-reverse：從右到左的水平方向為主軸

column:從上到下的垂直方向為主軸

column-reverse從下到上的垂直方向為主軸

子元素的對齊方式

justify-conent定義子元素在主軸上面的對齊方式

align-items定義子元素在側(cè)軸上對齊的方式

jstify-content有5個可選的對齊方式:

flex-start主軸起點對齊(默認值)

flex-end主軸結(jié)束點對齊

center在主軸中居中對齊

space-between兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等

space-around每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同

效果如下圖：

align-items表示側(cè)軸上的對齊方式:

stretch填充整個容器(默認值)

flex-start側(cè)軸的起點對齊

flex-end側(cè)軸的終點對齊

center在側(cè)軸中居中對齊

baseline以子元素的第一行文字對齊

簡單介紹到這里，我的關(guān)于react-native 的文章關(guān)于felx布局比較詳細，需要的可以看看。