Flex布局是一種強(qiáng)大而靈活的CSS布局方式，通過設(shè)置容器的display為flex，可以讓子元素按照一定的規(guī)則自動(dòng)分配空間。常用的一些技巧包括：使用flex-direction設(shè)置主軸方向，使用flex-wrap換行排列，使用justify-content和align-items調(diào)整子元素沿主、交叉軸的對(duì)齊方式，使用flex-grow和flex-shrink控制子元素的伸縮性，使用order調(diào)整子元素的顯示順序，使用flex-basis設(shè)置子元素的初始尺寸等。
這種布局方式非常適用于響應(yīng)式設(shè)計(jì)，并且能夠簡(jiǎn)化頁面布局的復(fù)雜性。
布局思路是這樣的：
1、首先給header和footer一個(gè)固定的高度。
2、然后記得body的高度要設(shè)為100%，不然body是沒有高度的。
3、body的布局設(shè)為flex，然后。
4、設(shè)置好了header和footer之后，我們就可以開始設(shè)計(jì)main部分的內(nèi)容排列，因?yàn)閎ody設(shè)置的排列是column，就是縱向排列，所以不能用align-items撐開main，只能在main里面設(shè)置flex: 1 1 auto將元素?fù)未螅襛side和article是有滾動(dòng)條的：所以在main里面要設(shè)置隱藏浮動(dòng)，不然會(huì)將屏幕撐到很大。
5、上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撐滿寬度，也要設(shè)置flex: 1 1 auto。最后再完善每塊里面的細(xì)節(jié)布局。
Flex布局又稱彈性布局，在小程序開發(fā)中比較適用。因此將Flex布局相關(guān)屬性整理如下，搞清楚了這個(gè)布局，小程序開發(fā)的頁面布局就不在話下了。布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
div布局使用的是“盒模型”加上display、position和float屬性，但是對(duì)于一些特殊的布局實(shí)現(xiàn)例如居中卻是比較麻煩。
Flex 即為Flexible Box，指的是“彈性布局”，它可以為盒模型提供更加靈活的布局方式，例如，用flex可以優(yōu)雅地實(shí)現(xiàn)水平豎直居中的布局。
CSS3 彈性盒( Flexible Box 或 flexbox)，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
css3引入的flex布局優(yōu)缺點(diǎn)：優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個(gè)布局效果。
缺點(diǎn)是：瀏覽器兼容性比較差，只能兼容到ie9及以上。
flex意為“彈性布局”，為盒模型提供最大靈活性。任何一個(gè)容器都可以指定為flex布局。
采用flex布局的元素，稱為flex容器。他的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目，簡(jiǎn)稱項(xiàng)目。
容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸。
主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
首先是上下布局，標(biāo)題欄 和主體 主體 分左右 導(dǎo)航 和內(nèi)容 左邊可用tabnavigator 右邊viewstack 或者static
CSS Flex布局中的自動(dòng)換行是通過flex-wrap屬性實(shí)現(xiàn)的。當(dāng)flex-wrap屬性的值為wrap時(shí)，如果一行中的元素寬度之和超過了容器的寬度，那么多余的元素會(huì)自動(dòng)換行到下一行。
具體實(shí)現(xiàn)原理如下：
1. 首先，F(xiàn)lex容器會(huì)根據(jù)flex-direction屬性的值（默認(rèn)為row）將子元素排列在一行上。
2. 當(dāng)一行中的元素寬度之和超過了容器的寬度時(shí)，如果flex-wrap屬性的值為nowrap（默認(rèn)值），則子元素會(huì)縮小以適應(yīng)容器寬度，否則會(huì)自動(dòng)換行到下一行。
3. 換行后，F(xiàn)lex容器會(huì)根據(jù)flex-wrap屬性的值將子元素排列在新的一行上。
4. 如果新的一行中的元素寬度之和仍然超過了容器的寬度，那么會(huì)繼續(xù)自動(dòng)換行，直到所有子元素都排列完畢。
需要注意的是，F(xiàn)lex容器中的子元素需要設(shè)置flex-basis屬性或width屬性，以便計(jì)算元素的寬度。同時(shí)，如果子元素的flex-grow屬性值不為0，那么它們會(huì)根據(jù)剩余空間自動(dòng)擴(kuò)展，從而影響自動(dòng)換行的效果。
在微信小程序開發(fā)中，布局是一個(gè)至關(guān)重要的部分。其中，flex布局是一種靈活且強(qiáng)大的布局方式，能夠幫助開發(fā)者更輕松地實(shí)現(xiàn)頁面布局。本文將深入探討微信小程序中的flex布局，帶您了解其優(yōu)勢(shì)、用法和實(shí)際應(yīng)用。
flex布局是一種基于盒模型的布局方式，通過靈活的彈性盒子布局模型，實(shí)現(xiàn)頁面元素的動(dòng)態(tài)排列和對(duì)齊。在微信小程序中，可以通過使用flex布局輕松實(shí)現(xiàn)頁面的響應(yīng)式布局，適應(yīng)不同屏幕尺寸和設(shè)備。
相比傳統(tǒng)的布局方式，flex布局具有以下幾個(gè)優(yōu)勢(shì)：
要在微信小程序中使用flex布局，首先需要在WXML文件中定義布局結(jié)構(gòu)，并在WXSS文件中添加相應(yīng)的flex布局樣式。下面是一個(gè)簡(jiǎn)單的示例：
<view class="container">
<view class="item item1">Item 1</view>
<view class="item item2">Item 2</view>
<view class="item item3">Item 3</view>
</view>
在WXSS文件中添加flex布局樣式：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
通過以上代碼示例，可以實(shí)現(xiàn)一個(gè)橫向布局的flex布局示例，其中三個(gè)子元素平均分配父容器的空間，并且在父容器中居中顯示。
flex布局在微信小程序開發(fā)中具有廣泛的應(yīng)用場(chǎng)景，特別適用于以下情況：
在微信小程序開發(fā)中，靈活運(yùn)用flex布局能夠提升頁面布局的靈活性和美觀度，使用戶體驗(yàn)更加友好和舒適。通過本文的介紹，相信您已經(jīng)對(duì)微信小程序中的flex布局有了更深入的了解，希望可以幫助您在實(shí)際開發(fā)中更好地運(yùn)用flex布局，打造出更好的用戶界面。
歡迎關(guān)注我們的博客，了解更多關(guān)于微信小程序開發(fā)的技術(shù)分享和最新動(dòng)態(tài)！
flex-align：默認(rèn)是設(shè)置垂直方向的對(duì)齊方式，值： start、end、center、stretch、baseline。
flex-pack：設(shè)置子元素之間如何分配多余空間，值：start、end、center、justify。
flex-direction：設(shè)置子元素的排列方式， row、row-reverse、column、column-reverse。
flex-wrap：設(shè)置子元素的是否自動(dòng)換行和排列方向，值：nowrap、wrap和wrap-reverse。
-ms-flex：設(shè)置子元素彈性，參數(shù)，分別是正彈性、負(fù)彈性和默認(rèn)大小。其實(shí)布局還有好多新玩法，你可以多看看相關(guān)的教程，比如說現(xiàn)在有個(gè)視頻的系列名稱叫做 《Buid New World》，里面有一集專門講 CSS3 復(fù)雜布局形式
