參考：
微信小程序頁(yè)面布局
微信小程序開(kāi)發(fā)詳解（九）---微信小程序布局基礎(chǔ)
1.Flex布局的特點(diǎn)
- 1.任意方向的伸縮送丰，向左芹关，向右毫捣，向下坪哄，向上
- 2.在樣式層可以調(diào)換和重排順序
- 3.主軸和側(cè)軸方便配置
- 4.子元素的空間拉伸和填充
- 5.沿著容器對(duì)齊
2.Flex布局的兩個(gè)基本屬性
1.Flex容器屬性
flex-flow：是flex-direction和flex-warp的簡(jiǎn)寫(xiě)
- 1.flex-direction：元素排列方向
- 2.flex-warp：元素如何換行（排列不下時(shí)）
nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面) - 3.justify-conent：元素在主軸上對(duì)齊方式
- 4.align-items：元素在側(cè)軸的對(duì)齊方式
2.內(nèi)部元素屬性
flex:是flex-grow、flex-shrink挠轴、flex-basis的簡(jiǎn)寫(xiě)
- 1.flex-grow：元素放大比率（有多余空間）
- 2.flex-shrink：元素縮小比率（空間不足）
- 3.flex-basis：元素在主軸上占據(jù)的空間
- 4.order：元素排列順序
- 5.align-self：元素自身的對(duì)齊方式
2.常識(shí)：
伸縮容器（flex container）
設(shè)有display:flex或者display:block的元素就是一個(gè)伸縮容器传睹，
伸縮項(xiàng)目（flex item）
里面的子元素稱(chēng)為伸縮項(xiàng)目，伸縮容器中子元素都是使用Flex布局排版岸晦。
1.display:block
指定為塊內(nèi)容器模式欧啤，總是使用新行開(kāi)始顯示，
微信小程序的視圖容器(view,scroll-view和swiper)默認(rèn)都是dispaly:block启上。
2.display:flex
指定為行內(nèi)容器模式邢隧，在一行內(nèi)顯示子元素，
可以使用flex-wrap屬性指定其是否換行冈在，
flex-wrap有三個(gè)值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
3.主軸和側(cè)軸
引用一下來(lái)自《微信小程序頁(yè)面布局》里面的一張圖
1.Flex-direction
控制主軸和側(cè)軸的方向:如果水平方向?yàn)橹鬏S倒慧，那個(gè)垂直方向就是側(cè)軸
- 1.row :左-->右 為主軸
- 2.row-reverse：右-->左 為主軸
- 3.column:上-->下 為主軸
- 4.column-reverse:下-->上 為主軸
2.對(duì)齊方式
justify-conent: 子元素在主軸上面的對(duì)齊方式
- 1.flex-start： 起點(diǎn)對(duì)齊(默認(rèn)值)
- 2.flex-end： 結(jié)束點(diǎn)對(duì)齊
- 3.center： 居中對(duì)齊
- 4.space-between： 兩端對(duì)齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
- 5.space-around： 子元素之距離相等纫谅，兩端的子元素距離容器的距離也和其它子元素之間的距離相同炫贤。
align-items: 子元素在側(cè)軸上對(duì)齊的方式
- 1.stretch： 填充整個(gè)容器(默認(rèn)值)
- 2.flex-start： 起點(diǎn)對(duì)齊
- 3.flex-end： 終點(diǎn)對(duì)齊
- 4.center： 中居中對(duì)齊
- 5.baseline： 以子元素的第一行文字對(duì)齊
